From 26765617200210d916007d95038e0a78c25cbc69 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Tue, 17 Jan 2023 15:20:12 +0800
Subject: [PATCH] style(console): table loading style (#2971)

---
 .../components/Table/TableLoading.module.scss |  3 +-
 .../src/components/Table/TableLoading.tsx     | 10 +--
 .../console/src/components/Table/index.tsx    | 82 ++++++++++---------
 3 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/packages/console/src/components/Table/TableLoading.module.scss b/packages/console/src/components/Table/TableLoading.module.scss
index 0157bd3f4..d6ecd7c30 100644
--- a/packages/console/src/components/Table/TableLoading.module.scss
+++ b/packages/console/src/components/Table/TableLoading.module.scss
@@ -11,10 +11,11 @@
       height: 40px;
       margin-right: _.unit(4);
       border-radius: 12px;
+      flex-shrink: 0;
     }
 
     .content {
-      width: 135px;
+      width: 100%;
 
       .title {
         @include _.shimmering-animation;
diff --git a/packages/console/src/components/Table/TableLoading.tsx b/packages/console/src/components/Table/TableLoading.tsx
index 15069d297..e386a04ba 100644
--- a/packages/console/src/components/Table/TableLoading.tsx
+++ b/packages/console/src/components/Table/TableLoading.tsx
@@ -1,16 +1,16 @@
 import * as styles from './TableLoading.module.scss';
 
 type Props = {
-  columns: number;
+  columnSpans: number[];
 };
 
-const TableLoading = ({ columns }: Props) => {
+const TableLoading = ({ columnSpans }: Props) => {
   return (
     <>
       {Array.from({ length: 8 }).map((_, rowIndex) => (
         // eslint-disable-next-line react/no-array-index-key
         <tr key={`row-${rowIndex}`} className={styles.loading}>
-          <td>
+          <td colSpan={columnSpans[0]}>
             <div className={styles.itemPreview}>
               <div className={styles.avatar} />
               <div className={styles.content}>
@@ -19,9 +19,9 @@ const TableLoading = ({ columns }: Props) => {
               </div>
             </div>
           </td>
-          {Array.from({ length: columns - 1 }).map((_, index) => (
+          {columnSpans.slice(1).map((colSpan, index) => (
             // eslint-disable-next-line react/no-array-index-key
-            <td key={index}>
+            <td key={index} colSpan={colSpan}>
               <div className={styles.rect} />
             </td>
           ))}
diff --git a/packages/console/src/components/Table/index.tsx b/packages/console/src/components/Table/index.tsx
index 7f541a17f..8827032e0 100644
--- a/packages/console/src/components/Table/index.tsx
+++ b/packages/console/src/components/Table/index.tsx
@@ -95,7 +95,9 @@ const Table = <
         <div className={classNames(styles.bodyTable, bodyClassName)}>
           <table>
             <tbody>
-              {isLoading && <TableLoading columns={columns.length} />}
+              {isLoading && (
+                <TableLoading columnSpans={columns.map(({ colSpan }) => colSpan ?? 1)} />
+              )}
               {!isLoading && !hasData && errorMessage && (
                 <TableError columns={columns.length} content={errorMessage} onRetry={onRetry} />
               )}
@@ -109,45 +111,47 @@ const Table = <
                   {placeholder?.content}
                 </TableEmpty>
               )}
-              {rowGroups.map(({ key, label, labelClassName, data }) => (
-                <Fragment key={key}>
-                  {label && (
-                    <tr>
-                      <td colSpan={totalColspan} className={labelClassName}>
-                        {label}
-                      </td>
-                    </tr>
-                  )}
-                  {data?.map((row) => {
-                    const rowClickable = isRowClickable(row);
-
-                    const onClick = conditional(
-                      rowClickable &&
-                        rowClickHandler &&
-                        (() => {
-                          rowClickHandler(row);
-                        })
-                    );
-
-                    return (
-                      <tr
-                        key={row[rowIndexKey]}
-                        className={classNames(
-                          rowClickable && styles.clickable,
-                          !isRowHoverEffectDisabled && styles.hoverEffect
-                        )}
-                        onClick={onClick}
-                      >
-                        {columns.map(({ dataIndex, colSpan, className, render }) => (
-                          <td key={dataIndex} colSpan={colSpan} className={className}>
-                            {render(row)}
-                          </td>
-                        ))}
+              {!isLoading &&
+                hasData &&
+                rowGroups.map(({ key, label, labelClassName, data }) => (
+                  <Fragment key={key}>
+                    {label && (
+                      <tr>
+                        <td colSpan={totalColspan} className={labelClassName}>
+                          {label}
+                        </td>
                       </tr>
-                    );
-                  })}
-                </Fragment>
-              ))}
+                    )}
+                    {data?.map((row) => {
+                      const rowClickable = isRowClickable(row);
+
+                      const onClick = conditional(
+                        rowClickable &&
+                          rowClickHandler &&
+                          (() => {
+                            rowClickHandler(row);
+                          })
+                      );
+
+                      return (
+                        <tr
+                          key={row[rowIndexKey]}
+                          className={classNames(
+                            rowClickable && styles.clickable,
+                            !isRowHoverEffectDisabled && styles.hoverEffect
+                          )}
+                          onClick={onClick}
+                        >
+                          {columns.map(({ dataIndex, colSpan, className, render }) => (
+                            <td key={dataIndex} colSpan={colSpan} className={className}>
+                              {render(row)}
+                            </td>
+                          ))}
+                        </tr>
+                      );
+                    })}
+                  </Fragment>
+                ))}
             </tbody>
           </table>
         </div>