added loading skeleton for table

lowcoder-org · FalkWolsky · Sep 8, 2024 · Sep 5, 2024 · Sep 5, 2024 · Sep 5, 2024
commit dd5edc2e0a15719aee4e7a89812cbd789d45aa55
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -46,6 +46,8 @@ import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 import { getVerticalMargin } from "@lowcoder-ee/util/cssUtil";
 import { TableSummary } from "./tableSummaryComp";
 import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined";
+import Skeleton from "antd/es/skeleton";
+import { SkeletonButtonProps } from "antd/es/skeleton/Button";
 
 export const EMPTY_ROW_KEY = 'empty_row';
 
@@ -439,6 +441,27 @@ const TableTd = styled.td<{
   }
 `;
 
+const TableTdLoading = styled(Skeleton.Button)<SkeletonButtonProps & {
+  $tableSize?: string;
+}>`
+  width: 90% !important;
+  display: table !important;
+
+  .ant-skeleton-button {
+    min-width: auto !important;
+    display: block !important;
+    ${(props) => props.$tableSize === 'small' && `
+      height: 20px !important;
+    `}
+    ${(props) => props.$tableSize === 'middle' && `
+      height: 24px !important;
+    `}
+    ${(props) => props.$tableSize === 'large' && `
+      height: 28px !important;
+    `}
+  }
+`;
+
 const ResizeableTitle = (props: any) => {
   const { onResize, onResizeStop, width, viewModeResizable, ...restProps } = props;
   const [widthChild, setWidthChild] = useState(0);
@@ -504,6 +527,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
   columnsStyle: TableColumnStyleType;
   size?: string;
   rowAutoHeight?: boolean;
+  customLoading?: boolean;
   onCellClick: (columnName: string, dataIndex: string) => void;
 };
 
@@ -520,6 +544,7 @@ function TableCellView(props: {
   linkStyle: TableColumnLinkStyleType;
   tableSize?: string;
   autoHeight?: boolean;
+  loading?: boolean;
 }) {
   const {
     record,
@@ -534,6 +559,7 @@ function TableCellView(props: {
     linkStyle,
     tableSize,
     autoHeight,
+    loading,
     ...restProps
   } = props;
 
@@ -591,7 +617,10 @@ function TableCellView(props: {
         $tableSize={tableSize}
         $autoHeight={autoHeight}
       >
-        {children}
+        {loading
+          ? <TableTdLoading block active $tableSize={tableSize} />
+          : children
+        }
       </TableTd>
     );
   }
@@ -629,6 +658,8 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
     width: -1,
   });
   let allColumnFixed = true;
+  const { customLoading } = props;
+
   const columns = props.columns.map((col, index) => {
     const { width, style, linkStyle, cellColorFn, ...restCol } = col;
     const resizeWidth = (resizeData.index === index ? resizeData.width : col.width) ?? 0;
@@ -662,7 +693,8 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
         autoHeight: props.rowAutoHeight,
         onClick: () => {
           props.onCellClick(col.titleText, String(col.dataIndex));
-        }
+        },
+        loading: customLoading,
       }),
       onHeaderCell: () => ({
         width: resizeWidth,
@@ -733,6 +765,7 @@ export function TableCompView(props: {
 }) {
   const [emptyRowsMap, setEmptyRowsMap] = useState<Record<string, RecordType>>({});
   const editorState = useContext(EditorContext);
+  const showDataLoadingIndicators = editorState?.getAppSettings().showDataLoadingIndicators;
   const { width, ref } = useResizeDetector({
     refreshMode: "debounce",
     refreshRate: 600,
@@ -957,6 +990,12 @@ export function TableCompView(props: {
   }
 
   const hideScrollbar = !showHorizontalScrollbar && !showVerticalScrollbar;
+  const showTableLoading = loading ||
+    // fixme isLoading type
+    ((showDataLoadingIndicators || compChildren.showDataLoadSpinner.getView()) &&
+      (compChildren.data as any).isLoading()) ||
+    compChildren.loading.getView();
+
   return (
     <BackgroundColorContext.Provider value={style.background} >
       <BackgroundWrapper
@@ -1018,17 +1057,7 @@ export function TableCompView(props: {
               size={compChildren.size.getView()}
               rowAutoHeight={rowAutoHeight}
               tableLayout="fixed"
-              loading={{
-                spinning: (
-                  loading ||
-                  // fixme isLoading type
-                  (compChildren.showDataLoadSpinner.getView() &&
-                    (compChildren.data as any).isLoading()) ||
-                  compChildren.loading.getView()
-                ),
-                indicator: <LoadingOutlined spin />,
-                size: 'large'
-              }}
+              customLoading={showTableLoading}
               onCellClick={(columnName: string, dataIndex: string) => {
                 comp.children.selectedCell.dispatchChangeValueAction({
                   name: columnName,

diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts
@@ -1507,7 +1507,7 @@ export const de: typeof en = {
       "dynamicColumnConfig": "Säuleneinstellung",
       "dynamicColumnConfigDesc": "Dynamische Spalteneinstellungen. Akzeptiert ein Array von Spaltennamen. In der Standardeinstellung sind alle Spalten sichtbar. Beispiel: [%r@\\\"id%r@\\\", %r@\\\"name%r@\\\"]",
       "position": "Position",
-      "showDataLoadSpinner": "Spinner beim Laden von Daten anzeigen",
+      "showDataLoadSpinner": "Ladeanzeige anzeigen",
       "showValue": "Wert anzeigen",
       "expandable": "Ausbaufähig",
       "configExpandedView": "Expandierte Ansicht konfigurieren",

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -218,6 +218,8 @@ export const en = {
     "className": "CSS Class name",
     "dataTestId": "Individual ID",
     "preventOverwriting": "Prevent overwriting styles",
+    "showComponentLoadingIndicators": "Show loading indicators when component load",
+    "showDataLoadingIndicators": "Show loading indicators when data load",
     "color": "Color",
     "horizontalGridCells": "Horizontal Grid Cells",
     "showHorizontalScrollbar": "Show Horizontal Scrollbar",
@@ -1991,7 +1993,7 @@ export const en = {
     "dynamicColumnConfig": "Visible Columns",
     "dynamicColumnConfigDesc": "Dynamic Column Visibility. Accepts an Array of Column Names. All Columns Are Visible by Default. Example: [\"id\", \"name\"]",
     "position": "Position",
-    "showDataLoadSpinner": "Show Spinner During Data Loading",
+    "showDataLoadSpinner": "Show Loading Indicator",
     "showValue": "Show Value",
     "expandable": "Expandable",
     "configExpandedView": "Configure Expanded View",

diff --git a/client/packages/lowcoder/src/i18n/locales/pt.ts b/client/packages/lowcoder/src/i18n/locales/pt.ts
@@ -2039,7 +2039,7 @@ export const pt: typeof en = {
         "dynamicColumnConfig": "Configuração de Coluna",
         "dynamicColumnConfigDesc": "Configurações de coluna dinâmica. Aceita um array de nomes de colunas. Todas as colunas são visíveis por padrão. Exemplo: [\"id\", \"name\"]",
         "position": "Posição",
-        "showDataLoadSpinner": "Mostrar Spinner Durante o Carregamento de Dados",
+        "showDataLoadSpinner": "Mostrar indicador de carregamento",
         "showValue": "Mostrar Valor",
         "expandable": "Expansível",
         "configExpandedView": "Configurar Visualização Expandida",

diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -1536,7 +1536,7 @@ export const zh: typeof en = {
         dynamicColumnConfig: "列设置",
         dynamicColumnConfigDesc: "动态列设置.接受一个列名的数组,默认情况下所有列都可见.\n" + `示例:["id", "name"]`,
         position: "位置",
-        showDataLoadSpinner: "数据加载时显示加载指示器",
+        showDataLoadSpinner: "显示加载指示器",
         showValue: "显示值",
         expandable: "可展开",
         configExpandedView: "配置展开视图",