feat: message reaction

src/routes/chat/ChannelChat/index.js

@@ -104,15 +104,19 @@ export default function ChannelChat({
               .map(([mid, msg]) => {
                 if (!msg) return null;
                 const {
+                  likes = null,
                   pending = false,
                   from_uid,
                   content,
                   content_type,
                   created_at,
                   unread,
+                  removed = false,
                 } = msg;
                 return (
                   <Message
+                    likes={likes}
+                    removed={removed}
                     pending={pending}
                     content_type={content_type}
                     unread={unread}

src/routes/chat/DMChat/index.js

@@ -83,9 +83,11 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
                 created_at,
                 unread,
                 pending = false,
+                removed = false,
               } = msg;
               return (
                 <Message
+                  removed={removed}
                   pending={pending}
                   content_type={content_type}
                   unread={unread}

src/routes/home/Loading.js

@@ -0,0 +1,29 @@
+// import React from 'react'
+import styled from "styled-components";
+const StyledWrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 200px;
+    height: 200px;
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+    padding: 10px;
+    border: 4px solid #999;
+    border-radius: 50%;
+  }
+`;
+export default function Loading() {
+  return (
+    <StyledWrapper>
+      <div className="loading">Loading...</div>
+    </StyledWrapper>
+  );
+}

src/routes/home/index.js

@@ -6,6 +6,7 @@ import { toggleMenuExpand } from "../../app/slices/ui";
 import StyledWrapper from "./styled";
 import ServerDropList from "./ServerDropList";
 import Tools from "./Tools";
+import Loading from "./Loading";
 import Menu from "./Menu";
 import usePreload from "./usePreload";
 import SettingModal from "../../common/component/Setting";
@@ -18,7 +19,7 @@ import NotificationHub from "../../common/component/NotificationHub";
 export default function HomePage() {
   const dispatch = useDispatch();
   const {
-    ui: { menuExpand, setting, channelSetting },
+    ui: { ready, menuExpand, setting, channelSetting },
     visitMark: { usersVersion, afterMid },
   } = useSelector((store) => {
     return {
@@ -32,39 +33,45 @@ export default function HomePage() {
   };
   console.log({ data, error, success });
   if (loading) {
-    return "loading";
+    return <Loading />;
   }
   return (
     <>
       <NotificationHub usersVersion={usersVersion} afterMid={afterMid} />
-      <StyledWrapper>
-        <div className={`col left ${menuExpand ? "expand" : ""}`}>
-          <ServerDropList data={data?.server} expand={menuExpand} />
-          <nav className="nav">
-            <NavLink className="link" to={"/chat"}>
-              <img src={ChatIcon} alt="chat icon" />{" "}
-              {menuExpand && (
-                <span className="animate__animated animate__fadeIn">Chat</span>
-              )}
-            </NavLink>
-            <NavLink className="link" to={"/contacts"}>
-              <img src={ContactIcon} alt="contact icon" />{" "}
-              {menuExpand && (
-                <span className="animate__animated animate__fadeIn">
-                  Contacts
-                </span>
-              )}
-            </NavLink>
-          </nav>
-          <div className="divider"></div>
-          <Tools expand={menuExpand} />
-          <Menu toggle={toggleExpand} expand={menuExpand} />
-          {/* <CurrentUser expand={menuExpand} /> */}
-        </div>
-        <div className="col right">
-          <Outlet />
-        </div>
-      </StyledWrapper>
+      {ready ? (
+        <StyledWrapper>
+          <div className={`col left ${menuExpand ? "expand" : ""}`}>
+            <ServerDropList data={data?.server} expand={menuExpand} />
+            <nav className="nav">
+              <NavLink className="link" to={"/chat"}>
+                <img src={ChatIcon} alt="chat icon" />{" "}
+                {menuExpand && (
+                  <span className="animate__animated animate__fadeIn">
+                    Chat
+                  </span>
+                )}
+              </NavLink>
+              <NavLink className="link" to={"/contacts"}>
+                <img src={ContactIcon} alt="contact icon" />{" "}
+                {menuExpand && (
+                  <span className="animate__animated animate__fadeIn">
+                    Contacts
+                  </span>
+                )}
+              </NavLink>
+            </nav>
+            <div className="divider"></div>
+            <Tools expand={menuExpand} />
+            <Menu toggle={toggleExpand} expand={menuExpand} />
+            {/* <CurrentUser expand={menuExpand} /> */}
+          </div>
+          <div className="col right">
+            <Outlet />
+          </div>
+        </StyledWrapper>
+      ) : (
+        <Loading />
+      )}
       {setting && <SettingModal />}
       {channelSetting && <ChannelSettingModal id={channelSetting} />}
     </>