[Platform]: tanstack server side table with initial loading

apps/platform/src/components/AssociationsToolkit/components/Table/SectionRender.jsx

@@ -1,22 +1,14 @@
 import { Suspense } from "react";
 import { styled } from "@mui/material/styles";
-import { LoadingBackdrop } from "ui";
+import { SectionLoader } from "ui";
 import { ENTITIES } from "../../utils";
 
 import prioritisationColumns from "../../static_datasets/prioritisationColumns";
 import targetSections from "../../../../sections/targetSections";
 import evidenceSections from "../../../../sections/evidenceSections";
 
 import { grey } from "@mui/material/colors";
-
-const LoadingContainer = styled("div")({
-  margin: "25px 0",
-  height: "100px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  gap: "20px",
-});
+import { Box } from "@mui/material";
 
 const Container = styled("div", {
   shouldForwardProp: prop => prop !== "table",
@@ -30,10 +22,9 @@ const Container = styled("div", {
 
 function LoadingSection() {
   return (
-    <LoadingContainer>
-      <LoadingBackdrop />
-      Importing section assets
-    </LoadingContainer>
+    <Box sx={{ m: 3 }}>
+      <SectionLoader />
+    </Box>
   );
 }
 

packages/ui/src/components/OtTable/OtTable.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useEffect, useMemo, useState } from "react";
+import { ReactElement, ReactNode, useMemo, useState } from "react";
 import { Box, Grid, IconButton, NativeSelect, Skeleton } from "@mui/material";
 import {
   useReactTable,
@@ -26,7 +26,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import OtTableColumnFilter from "./OtTableColumnFilter";
 // import { naLabel } from "../../constants";
 import OtTableSearch from "./OtTableSearch";
-import { OtTableProps } from "./table.types";
+import { OtTableProps } from "./types/tableTypes";
 import {
   FontAwesomeIconPadded,
   OtTableContainer,
@@ -42,15 +42,17 @@ import {
   getDefaultSortObj,
   getFilterValueFromObject,
   getLoadingRows,
+  isNestedColumns,
   mapTableColumnToTanstackColumns,
-} from "./tableUtil";
+} from "./utils/tableUtils";
 import Tooltip from "../Tooltip";
 import OtTableColumnVisibility from "./OtTableColumnVisibility";
 
 declare module "@tanstack/table-core" {
   interface FilterFns {
     searchFilterFn: FilterFn<unknown>;
   }
+
   interface FilterMeta {
     itemRank: RankingInfo;
   }
@@ -309,10 +311,17 @@ function OtTable({
 }
 
 function getLoadingCells(columms: Array<Record<string, unknown>>) {
-  return columms.map(column => ({
-    ...column,
-    cell: () => <Skeleton sx={{ minWidth: "50px" }} variant="text" />,
-  }));
+  const arr: Record<string, unknown>[] = [];
+  columms.forEach(e => {
+    if (isNestedColumns(e)) {
+      const headerObj = {
+        header: e.header || e.label,
+        columns: getLoadingCells(e.columns),
+      };
+      arr.push(headerObj);
+    } else arr.push({ ...e, cell: () => <Skeleton sx={{ minWidth: "50px" }} variant="text" /> });
+  });
+  return arr;
 }
 
 export default OtTable;