INIT

Author: geodem127

src/apps/content-editor/src/app/views/ItemList/ItemListTable.tsx

@@ -26,6 +26,7 @@ import {
   useMemo,
   useState,
   useContext,
+  useEffect,
 } from "react";
 import { ContentItem } from "../../../../../../shell/services/types";
 import { useStagedChanges } from "./StagedChangesContext";
@@ -42,6 +43,14 @@ import { ImageCell } from "./TableCells/ImageCell";
 import { SingleRelationshipCell } from "./TableCells/SingleRelationshipCell";
 import { useParams } from "../../../../../../shell/hooks/useParams";
 import { TableSortContext } from "./TableSortProvider";
+import { Skeleton } from "@mui/lab";
+import { GridColumnHeaderParams } from "@mui/x-data-grid-pro";
+import {
+  getSkeletonColumns,
+  getSkeletonRows,
+  HeaderLabel,
+  LoadingOverlay,
+} from "./SkeletonLoader";
 
 type ItemListTableProps = {
   loading: boolean;
@@ -79,6 +88,7 @@ const METADATA_COLUMNS = [
     width: 240,
     filterable: true,
     renderCell: (params: GridRenderCellParams) => <UserCell params={params} />,
+    type: "createdBy",
   },
   {
     field: "createdOn",
@@ -258,7 +268,7 @@ const fieldTypeColumnConfigMap = {
     },
   },
   sort: {
-    width: 112,
+    width: 156,
     filterable: true,
     renderCell: (params: GridRenderCellParams) => <SortCell params={params} />,
   },
@@ -310,13 +320,22 @@ export const ItemListTable = memo(
     }, [saveSnapshot, fields, modelZUID]);
 
     const columns = useMemo(() => {
+      // if (!fields?.length) return [];
       let result: any[] = [
         {
           field: "version",
-          headerName: "Vers.",
-          width: 59,
+          renderHeader: (params: GridColumnHeaderParams) =>
+            loading ? (
+              <HeaderLabel width={params?.colDef?.width || 62} />
+            ) : (
+              <Typography variant="body2" fontWeight={600}>
+                Version
+              </Typography>
+            ),
+          // width: 59,
           sortable: true,
           filterable: false,
+          type: "version",
           renderCell: (params: GridRenderCellParams) => (
             <VersionCell params={params} />
           ),
@@ -326,51 +345,66 @@ export const ItemListTable = memo(
         result = [
           ...result,
           ...fields
-            ?.filter((field) => !field.deletedAt && field?.settings?.list)
+            ?.filter((field) => !field?.deletedAt && field?.settings?.list)
             ?.map((field) => ({
-              field: field.name,
-              headerName: field.label,
+              field: field?.name,
+              renderHeader: () =>
+                loading ? (
+                  <HeaderLabel
+                    width={
+                      fieldTypeColumnConfigMap[field?.datatype]?.width || 180
+                    }
+                  />
+                ) : (
+                  <Typography variant="body2" fontWeight={600}>
+                    {field?.label}
+                  </Typography>
+                ),
               filterable: false,
+              type: field?.datatype,
               valueGetter: (params: any) => {
-                if (field.datatype === "currency") {
+                if (field?.datatype === "currency") {
                   return {
-                    value: params.row.data[field.name],
-                    currency: field.settings?.currency || "USD",
+                    value: params?.row?.data[field?.name],
+                    currency: field?.settings?.currency || "USD",
                   };
                 }
 
-                return params.row.data[field.name];
+                return params?.row?.data[field?.name];
               },
-              ...fieldTypeColumnConfigMap[field.datatype],
+              ...fieldTypeColumnConfigMap[field?.datatype],
               // if field is yes_no but it has custom options increase the width
-              ...(field.datatype === "yes_no" &&
+              ...(field?.datatype === "yes_no" &&
                 field?.settings?.options?.[0] !== "No" &&
                 field?.settings?.options?.[1] !== "Yes" && {
                   width: 280,
                 }),
             })),
         ];
       }
-      return [...result, ...METADATA_COLUMNS];
-    }, [fields]);
-    if (!initialState) {
-      return (
-        <Box
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-          height="100%"
-        >
-          <CircularProgress />
-        </Box>
-      );
-    }
+      result = [
+        ...result,
+        ...METADATA_COLUMNS.map((column) => ({
+          ...column,
+          renderHeader: () =>
+            loading ? (
+              <HeaderLabel width={column?.width} />
+            ) : (
+              <Typography variant="body2" fontWeight={600}>
+                {column?.headerName}
+              </Typography>
+            ),
+        })),
+      ];
+
+      return result;
+    }, [fields, loading]);
 
     return (
       <DataGridPro
         apiRef={apiRef}
         loading={loading}
-        rows={rows}
+        rows={loading ? [] : rows}
         columns={columns}
         pinnedColumns={pinnedColumns}
         onPinnedColumnsChange={(newPinnedColumns) =>
@@ -397,10 +431,20 @@ export const ItemListTable = memo(
         }}
         components={{
           NoRowsOverlay: noRowsOverlay,
-          BaseCheckbox: (props) => (
-            <Checkbox
-              disabled={stagedChanges && Object.keys(stagedChanges)?.length}
-              {...props}
+          BaseCheckbox: (props) =>
+            loading ? (
+              <Skeleton variant="rounded" width="18px" height="18px" />
+            ) : (
+              <Checkbox
+                disabled={stagedChanges && Object.keys(stagedChanges)?.length}
+                {...props}
+              />
+            ),
+          LoadingOverlay: () => (
+            <LoadingOverlay
+              columns={columns}
+              rowCount={12}
+              dimentions={initialState?.columns?.dimensions}
             />
           ),
         }}
@@ -496,6 +540,13 @@ export const ItemListTable = memo(
           "& [data-cy='NoResults']": {
             pointerEvents: "all",
           },
+          pointerEvents: loading ? "none" : "auto",
+          "& .MuiDataGrid-virtualScroller": {
+            overflow: loading ? "hidden" : "auto",
+          },
+          "& .MuiDataGrid-iconButtonContainer": {
+            display: loading ? "none" : "inherit",
+          },
         }}
       />
     );