feat(main-room-list): add loading skeletons (#311)

* refactor(main-menu): add default dimension for imgs * feat(main-room-list): add loading skeletons
netless-io · Feb 22, 2021 · 5657f3c · 5657f3c
1 parent bf429e4
commit 5657f3c
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 21 deletions.
diff --git a/src/renderer-app/src/components/MainMenu.tsx b/src/renderer-app/src/components/MainMenu.tsx
@@ -56,7 +56,14 @@ export const MainMenu = React.memo<MainMenuProps>(function MainMenu() {
         <Menu className="menu-container" defaultSelectedKeys={[selectedKey]}>
             {MainMenuItems.map(({ routeName, title, icon, iconActive, href }) => (
                 <Menu.Item
-                    icon={<img src={selectedKey === routeName ? iconActive : icon} alt={title} />}
+                    icon={
+                        <img
+                            width={44}
+                            height={44}
+                            src={selectedKey === routeName ? iconActive : icon}
+                            alt={title}
+                        />
+                    }
                     key={routeName}
                 >
                     <Link to={href}>

diff --git a/src/renderer-app/src/components/MainPageLayout.tsx b/src/renderer-app/src/components/MainPageLayout.tsx
@@ -19,7 +19,7 @@ export default class MainPageLayout extends React.PureComponent<MainPageLayoutPr
             <div className="layout-container">
                 <div className="layout-container-menu">
                     <div className="layout-container-header">
-                        <img src={this.userAvatar} alt="avatar" />
+                        <img width={40} height={40} src={this.userAvatar} alt="avatar" />
                     </div>
                     <MainMenu />
                 </div>

diff --git a/src/renderer-app/src/pages/HomePage/MainRoomListPanel/MainRoomList.less b/src/renderer-app/src/pages/HomePage/MainRoomListPanel/MainRoomList.less
@@ -159,3 +159,20 @@
 .room-list-under {
     height: 16px;
 }
+
+.main-room-list-skeletons {
+    padding: 0 24px;
+
+    & > * {
+        padding-top: 16px;
+        border-bottom: 1px solid #dbe1ea;
+
+        &:last-of-type {
+            border-bottom: none;
+        }
+    }
+
+    .ant-skeleton-paragraph > * {
+        border-radius: 6px !important;
+    }
+}
diff --git a/src/renderer-app/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx b/src/renderer-app/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx
@@ -1,6 +1,7 @@
 import { isSameDay } from "date-fns/fp";
 import { observer } from "mobx-react-lite";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import { Skeleton } from "antd";
 import { ListRoomsType } from "../../../apiMiddleware/flatServer";
 import { RoomType } from "../../../apiMiddleware/flatServer/constants";
 import emptyBoxSVG from "../../../assets/image/empty-box.svg";
@@ -10,41 +11,58 @@ import { RouteNameType, usePushHistory } from "../../../utils/routes";
 import { MainRoomListItem } from "./MainRoomListItem";
 import { errorTips } from "../../../components/Tips/ErrorTips";
 import { joinRoomHandler } from "../../utils/joinRoomHandler";
+import { useSafePromise } from "../../../utils/hooks/lifecycle";
 
 export interface MainRoomListProps {
     listRoomsType: ListRoomsType;
 }
 
 export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({ listRoomsType }) {
-    const [refreshRooms, forceRefreshRooms] = useState(0);
     const roomStore = useContext(RoomStoreContext);
-    const [roomUUIDs, setRoomUUIDs] = useState<string[]>([]);
+    const [roomUUIDs, setRoomUUIDs] = useState<string[]>();
     const pushHistory = usePushHistory();
+    const sp = useSafePromise();
     const isHistoryList = listRoomsType === ListRoomsType.History;
 
-    useEffect(() => {
-        let isUnMount = false;
-
-        function refreshRooms(): void {
-            roomStore
-                .listRooms(listRoomsType, { page: 1 })
-                .then(roomUUIDs => {
-                    if (!isUnMount) {
-                        setRoomUUIDs(roomUUIDs);
-                    }
-                })
-                .catch(errorTips);
-        }
+    const refreshRooms = useCallback(
+        async function refreshRooms(): Promise<void> {
+            try {
+                const roomUUIDs = await sp(roomStore.listRooms(listRoomsType, { page: 1 }));
+                setRoomUUIDs(roomUUIDs);
+            } catch (e) {
+                setRoomUUIDs([]);
+                errorTips(e);
+            }
+        },
+        [listRoomsType, roomStore, sp],
+    );
 
+    useEffect(() => {
         refreshRooms();
 
         const ticket = window.setInterval(refreshRooms, 30 * 1000);
 
         return () => {
-            isUnMount = true;
             window.clearInterval(ticket);
         };
-    }, [refreshRooms, listRoomsType, roomStore]);
+    }, [refreshRooms]);
+
+    if (!roomUUIDs) {
+        return (
+            <div className="main-room-list-skeletons">
+                {Array(4)
+                    .fill(0)
+                    .map((_, i) => (
+                        <Skeleton
+                            key={i}
+                            active
+                            title={false}
+                            paragraph={{ rows: 4, width: ["13%", "50%", "13%", "13%"] }}
+                        />
+                    ))}
+            </div>
+        );
+    }
 
     if (roomUUIDs.length <= 0) {
         return (
@@ -89,7 +107,7 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
                             isHistoryList={isHistoryList}
                             onJoinRoom={roomUUID => joinRoomHandler(roomUUID, pushHistory)}
                             onReplayRoom={replayRoom}
-                            onRemoveRoom={() => forceRefreshRooms(e => ~e)}
+                            onRemoveRoom={refreshRooms}
                         />
                     );
                 },