feat(flat-components): add skeletons component to cloud storage (#985)

packages/flat-components/src/components/CloudStorage/CloudStorageSkeletons/CloudStorageSkeletons.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { CloudStorageSkeletons, CloudStorageSkeletonsProps } from ".";
+
+const storyMeta: Meta = {
+    title: "CloudStorage/CloudStorageSkeletons",
+    component: CloudStorageSkeletons,
+};
+
+export default storyMeta;
+
+export const Overview: Story<CloudStorageSkeletonsProps> = args => (
+    <CloudStorageSkeletons {...args} />
+);
+
+Overview.args = {
+    filesCount: 10,
+};

packages/flat-components/src/components/CloudStorage/CloudStorageSkeletons/index.tsx

@@ -0,0 +1,34 @@
+import "./style.less";
+
+import React from "react";
+import { Skeleton } from "antd";
+import classNames from "classnames";
+
+export interface CloudStorageSkeletonsProps {
+    isCompactMode: boolean;
+}
+
+export const CloudStorageSkeletons: React.FC<CloudStorageSkeletonsProps> = ({ isCompactMode }) => {
+    return (
+        <div className="cloud-storage-skeletons">
+            {Array(10)
+                .fill(0)
+                .map((_, i) => (
+                    <div className="cloud-storage-skeletons-item" key={i}>
+                        <div
+                            className={classNames("cloud-storage-skeletons-item-icon", {
+                                "cloud-storage-skeletons-item-icon-compact": isCompactMode,
+                            })}
+                        >
+                            <Skeleton active title={false} paragraph={{ rows: 1, width: "100%" }} />
+                        </div>
+                        <div className="cloud-storage-skeletons-item-file">
+                            <Skeleton active title={false} paragraph={{ rows: 1, width: "100%" }} />
+                        </div>
+                        <Skeleton active title={false} paragraph={{ rows: 1, width: "88%" }} />
+                        <Skeleton active title={false} paragraph={{ rows: 1, width: "100%" }} />
+                    </div>
+                ))}
+        </div>
+    );
+};

packages/flat-components/src/components/CloudStorage/CloudStorageSkeletons/style.less

@@ -0,0 +1,44 @@
+.cloud-storage-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;
+    }
+}
+
+.cloud-storage-skeletons-item {
+    display: flex;
+    flex-direction: row;
+}
+
+.cloud-storage-skeletons-item-icon {
+    width: 8%;
+    margin-right: 20px;
+}
+
+.cloud-storage-skeletons-item-icon-compact {
+    width: 18%;
+    margin-right: 20px;
+}
+
+.cloud-storage-skeletons-item-file {
+    width: 100%;
+    margin-right: 200px;
+}

packages/flat-components/src/components/CloudStorage/index.tsx

@@ -1,4 +1,5 @@
 export * from "./CloudStorageFileList";
 export * from "./CloudStorageUploadItem";
 export * from "./CloudStorageUploadPanel";
+export * from "./CloudStorageSkeletons";
 export * from "./types";

packages/flat-components/src/containers/CloudStorageContainer/index.tsx

@@ -5,7 +5,7 @@ import { observer } from "mobx-react-lite";
 import { Button } from "antd";
 import { CSSTransition } from "react-transition-group";
 import { CloudStorageStore } from "./store";
-import { CloudStorageUploadPanel } from "../../components/CloudStorage";
+import { CloudStorageSkeletons, CloudStorageUploadPanel } from "../../components/CloudStorage";
 import { CloudStorageUploadListContainer } from "./CloudStorageUploadListContainer";
 import { CloudStorageFileListContainer } from "./CloudStorageFileListContainer";
 import classNames from "classnames";
@@ -59,7 +59,11 @@ export const CloudStorageContainer = observer<CloudStorageContainerProps>(
                     </div>
                 )}
                 <div className="cloud-storage-container-file-list fancy-scrollbar">
-                    <CloudStorageFileListContainer store={store} />
+                    {!store.totalUsageHR ? (
+                        <CloudStorageSkeletons isCompactMode={store.compact} />
+                    ) : (
+                        <CloudStorageFileListContainer store={store} />
+                    )}
                 </div>
                 <CSSTransition
                     in={store.isUploadPanelVisible && store.isUploadPanelExpand && store.compact}