feat(flat-components): extract RoomListSkeletions (#689)

netless-io · May 31, 2021 · c86c546 · c86c546
1 parent d8d0c79
commit c86c546
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 19 deletions.
diff --git a/desktop/renderer-app/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx b/desktop/renderer-app/src/pages/HomePage/MainRoomListPanel/MainRoomList.tsx
@@ -1,5 +1,5 @@
 import { clipboard } from "electron";
-import { message, Skeleton } from "antd";
+import { message } from "antd";
 import React, { Fragment, useCallback, useContext, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { isSameDay } from "date-fns";
@@ -11,6 +11,7 @@ import {
     RoomListEmpty,
     RoomListItem,
     RoomListItemButton,
+    RoomListSkeletons,
     RoomStatusType,
 } from "flat-components";
 import { ListRoomsType } from "../../../apiMiddleware/flatServer";
@@ -64,20 +65,7 @@ export const MainRoomList = observer<MainRoomListProps>(function MainRoomList({
     }, [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>
-        );
+        return <RoomListSkeletons />;
     }
 
     if (roomUUIDs.length <= 0) {

diff --git a/packages/flat-components/src/components/HomePage/RoomList/RoomList.stories.tsx b/packages/flat-components/src/components/HomePage/RoomList/RoomList.stories.tsx
@@ -13,7 +13,7 @@ const storyMeta: Meta = {
 
 export default storyMeta;
 
-export const Overview: Story<RoomListProps> = args => (
+export const Overview: Story<RoomListProps<string>> = args => (
     <RoomList {...args}>
         <RoomListDate date={chance.date()} />
         {Array(20)

diff --git a/packages/flat-components/src/components/HomePage/RoomList/RoomListItem.stories.tsx b/packages/flat-components/src/components/HomePage/RoomList/RoomListItem.stories.tsx
@@ -10,7 +10,7 @@ const storyMeta: Meta = {
 
 export default storyMeta;
 
-export const Overview: Story<RoomListItemProps> = args => <RoomListItem {...args} />;
+export const Overview: Story<RoomListItemProps<string>> = args => <RoomListItem {...args} />;
 Overview.args = {
     title: faker.random.words(4),
     beginTime: faker.date.past(),
@@ -31,7 +31,7 @@ Overview.argTypes = {
     extra: { control: false },
 };
 
-export const LongRoomName: Story<RoomListItemProps> = args => <RoomListItem {...args} />;
+export const LongRoomName: Story<RoomListItemProps<string>> = args => <RoomListItem {...args} />;
 LongRoomName.args = {
     title: faker.random.words(20),
     beginTime: faker.date.past(),

diff --git a/packages/flat-components/src/components/HomePage/RoomList/RoomListSkeletons.stories.tsx b/packages/flat-components/src/components/HomePage/RoomList/RoomListSkeletons.stories.tsx
@@ -0,0 +1,12 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import { RoomListSkeletons } from ".";
+
+const storyMeta: Meta = {
+    title: "HomePage/RoomListSkeletons",
+    component: RoomListSkeletons,
+};
+
+export default storyMeta;
+
+export const Overview: Story = args => <RoomListSkeletons {...args} />;
diff --git a/packages/flat-components/src/components/HomePage/RoomList/index.tsx b/packages/flat-components/src/components/HomePage/RoomList/index.tsx
@@ -7,7 +7,7 @@ import React, { PropsWithChildren, ReactElement } from "react";
 import { format, isToday, isTomorrow } from "date-fns";
 import { zhCN } from "date-fns/locale";
 import classNames from "classnames";
-import { Button, Dropdown, Menu } from "antd";
+import { Button, Dropdown, Menu, Skeleton } from "antd";
 import { useTranslation } from "react-i18next";
 
 export interface RoomListDateProps {
@@ -158,6 +158,23 @@ export function RoomListEmpty({ isHistory }: RoomListEmptyProps): ReactElement {
     );
 }
 
+export function RoomListSkeletons(): ReactElement {
+    return (
+        <div className="room-list-skeletons">
+            {Array(4)
+                .fill(0)
+                .map((_, i) => (
+                    <Skeleton
+                        key={i}
+                        active
+                        title={false}
+                        paragraph={{ rows: 4, width: ["13%", "50%", "13%", "13%"] }}
+                    />
+                ))}
+        </div>
+    );
+}
+
 export interface RoomListProps<T extends string> {
     /** will be hidden on mobile */
     title?: string;

diff --git a/packages/flat-components/src/components/HomePage/RoomList/style.less b/packages/flat-components/src/components/HomePage/RoomList/style.less
@@ -220,3 +220,37 @@
         color: #7a7b7c;
     }
 }
+
+.room-list-skeletons {
+    padding: 0 16px;
+
+    > * {
+        padding-top: 16px;
+        border-bottom: 1px solid #dbe1ea;
+
+        &:last-of-type {
+            border-bottom: none;
+        }
+    }
+
+    .ant-skeleton.ant-skeleton-active .ant-skeleton-content .ant-skeleton-title,
+    .ant-skeleton.ant-skeleton-active .ant-skeleton-content .ant-skeleton-paragraph > li {
+        background: linear-gradient(
+            90deg,
+            hsla(210, 33%, 96%, 1) 25%,
+            hsla(210, 33%, 92%, 1) 37%,
+            hsla(210, 33%, 96%, 1) 63%
+        );
+        background-size: 400% 100%;
+        animation: ant-skeleton-loading 1.4s ease infinite;
+    }
+}
+
+@keyframes ant-skeleton-loading {
+    0% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
+}