From d2c0f623c6a51a6228cda8f64b8e545085b82ae2 Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Thu, 24 Mar 2022 11:48:39 +0800
Subject: [PATCH] feat(console): table loading component (#441)

---
 .../Table/ItemPreviewLoading.module.scss      | 33 +++++++++++++++++++
 .../components/Table/ItemPreviewLoading.tsx   | 15 +++++++++
 .../components/Table/TableLoading.module.scss |  9 +++++
 .../src/components/Table/TableLoading.tsx     | 18 ++++++++++
 .../console/src/pages/ApiResources/index.tsx  | 12 +++++--
 .../console/src/pages/Applications/index.tsx  | 12 +++++--
 .../console/src/pages/Connectors/index.tsx    | 15 +++++++--
 packages/console/src/pages/Users/index.tsx    | 15 +++++++--
 8 files changed, 117 insertions(+), 12 deletions(-)
 create mode 100644 packages/console/src/components/Table/ItemPreviewLoading.module.scss
 create mode 100644 packages/console/src/components/Table/ItemPreviewLoading.tsx
 create mode 100644 packages/console/src/components/Table/TableLoading.module.scss
 create mode 100644 packages/console/src/components/Table/TableLoading.tsx

diff --git a/packages/console/src/components/Table/ItemPreviewLoading.module.scss b/packages/console/src/components/Table/ItemPreviewLoading.module.scss
new file mode 100644
index 000000000..b9b9e1770
--- /dev/null
+++ b/packages/console/src/components/Table/ItemPreviewLoading.module.scss
@@ -0,0 +1,33 @@
+@use '@/scss/underscore' as _;
+
+td > div.loading {
+  display: flex;
+  background: none;
+  height: 50px;
+  border-radius: unset;
+
+  .avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: _.unit(2);
+    margin-right: _.unit(4);
+    background: var(--color-neutral-95);
+  }
+
+  .content {
+    flex: 1;
+
+    .title {
+      background: var(--color-neutral-95);
+      border-radius: _.unit(2);
+      height: 16px;
+      margin: _.unit(2) 0;
+    }
+
+    .subTitle {
+      background: var(--color-neutral-95);
+      border-radius: _.unit(2);
+      height: 12px;
+    }
+  }
+}
diff --git a/packages/console/src/components/Table/ItemPreviewLoading.tsx b/packages/console/src/components/Table/ItemPreviewLoading.tsx
new file mode 100644
index 000000000..ebfca32d9
--- /dev/null
+++ b/packages/console/src/components/Table/ItemPreviewLoading.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import * as styles from './ItemPreviewLoading.module.scss';
+
+const ItemPreviewLoading = () => (
+  <div className={styles.loading}>
+    <div className={styles.avatar} />
+    <div className={styles.content}>
+      <div className={styles.title} />
+      <div className={styles.subTitle} />
+    </div>
+  </div>
+);
+
+export default ItemPreviewLoading;
diff --git a/packages/console/src/components/Table/TableLoading.module.scss b/packages/console/src/components/Table/TableLoading.module.scss
new file mode 100644
index 000000000..7e39e4f14
--- /dev/null
+++ b/packages/console/src/components/Table/TableLoading.module.scss
@@ -0,0 +1,9 @@
+@use '@/scss/underscore' as _;
+
+.loading {
+  td > div {
+    border-radius: _.unit(2);
+    background: var(--color-neutral-95);
+    height: 32px;
+  }
+}
diff --git a/packages/console/src/components/Table/TableLoading.tsx b/packages/console/src/components/Table/TableLoading.tsx
new file mode 100644
index 000000000..918309a9b
--- /dev/null
+++ b/packages/console/src/components/Table/TableLoading.tsx
@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+
+import * as styles from './TableLoading.module.scss';
+
+export { default as ItemPreviewLoading } from './ItemPreviewLoading';
+
+type Props = {
+  children: ReactNode;
+};
+
+const TableLoading = ({ children }: Props) => (
+  <>
+    <tr className={styles.loading}>{children}</tr>
+    <tr className={styles.loading}>{children}</tr>
+  </>
+);
+
+export default TableLoading;
diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx
index 5fdbbb513..f0781cc72 100644
--- a/packages/console/src/pages/ApiResources/index.tsx
+++ b/packages/console/src/pages/ApiResources/index.tsx
@@ -13,6 +13,7 @@ import CardTitle from '@/components/CardTitle';
 import CopyToClipboard from '@/components/CopyToClipboard';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
+import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
 
@@ -73,9 +74,14 @@ const ApiResources = () => {
             </tr>
           )}
           {isLoading && (
-            <tr>
-              <td colSpan={2}>loading</td>
-            </tr>
+            <TableLoading>
+              <td className={styles.apiResourceName}>
+                <ItemPreviewLoading />
+              </td>
+              <td>
+                <div />
+              </td>
+            </TableLoading>
           )}
           {data?.map(({ id, name, indicator }) => (
             <tr
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index 84a389d45..08e79ae2f 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@@ -13,6 +13,7 @@ import CardTitle from '@/components/CardTitle';
 import CopyToClipboard from '@/components/CopyToClipboard';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
+import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
 import { applicationTypeI18nKey } from '@/types/applications';
@@ -71,9 +72,14 @@ const Applications = () => {
             </tr>
           )}
           {isLoading && (
-            <tr>
-              <td colSpan={2}>loading</td>
-            </tr>
+            <TableLoading>
+              <td className={styles.applicationName}>
+                <ItemPreviewLoading />
+              </td>
+              <td>
+                <div />
+              </td>
+            </TableLoading>
           )}
           {data?.map(({ id, name, type }) => (
             <tr
diff --git a/packages/console/src/pages/Connectors/index.tsx b/packages/console/src/pages/Connectors/index.tsx
index 6dd4972d5..4cadee477 100644
--- a/packages/console/src/pages/Connectors/index.tsx
+++ b/packages/console/src/pages/Connectors/index.tsx
@@ -9,6 +9,7 @@ import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
 import TabNav, { TabNavLink } from '@/components/TabNav';
+import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 
 import ConnectorRow from './components/ConnectorRow';
@@ -79,9 +80,17 @@ const Connectors = () => {
               </tr>
             )}
             {isLoading && (
-              <tr>
-                <td colSpan={3}>loading</td>
-              </tr>
+              <TableLoading>
+                <td className={styles.connectorName}>
+                  <ItemPreviewLoading />
+                </td>
+                <td>
+                  <div />
+                </td>
+                <td>
+                  <div />
+                </td>
+              </TableLoading>
             )}
             {socialConnectors?.length === 0 && (
               <tr>
diff --git a/packages/console/src/pages/Users/index.tsx b/packages/console/src/pages/Users/index.tsx
index fae11fa4d..63a7529d5 100644
--- a/packages/console/src/pages/Users/index.tsx
+++ b/packages/console/src/pages/Users/index.tsx
@@ -10,6 +10,7 @@ import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
+import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
 
@@ -65,9 +66,17 @@ const Users = () => {
             </tr>
           )}
           {isLoading && (
-            <tr>
-              <td colSpan={2}>loading</td>
-            </tr>
+            <TableLoading>
+              <td className={styles.userName}>
+                <ItemPreviewLoading />
+              </td>
+              <td>
+                <div />
+              </td>
+              <td>
+                <div />
+              </td>
+            </TableLoading>
           )}
           {data?.map(({ id, name, username }) => (
             <tr