导入可见性

1import React from "react";
2import Send from "./icons/Send";
3import Emoji from "./icons/Emoji";
4import LoadableVisibility from "react-loadable-visibility/react-loadable";
5
6const EmojiPicker = LoadableVisibility({
7  loader: () => import("./EmojiPicker"),
8  loading: <p id="loading">Loading</p>
9});
10
11const ChatInput = () => {
12  const [pickerOpen, togglePicker] = React.useReducer(state => !state, false);
13
14  return (
15    <div className="chat-input-container">
16      <input type="text" placeholder="Type a message..." />
17      <Emoji onClick={togglePicker} />
18      {pickerOpen && <EmojiPicker />}
19      <Send />
20    </div>
21  );
22};
23
24console.log("ChatInput loading", Date.now());
25
26export default ChatInput;