refactoring: migrating to react-query to manage service-side state.

client/src/components/Datatable/TableHeader.js

@@ -27,11 +27,13 @@ function TableHeaderCell({ column, index }) {
         </span>
       </If>
 
-      <div {...column.getSortByToggleProps({
-        className: classNames('cell-inner', {
-          'text-overview': column.textOverview,
-        })
-      })}>
+      <div
+        {...column.getSortByToggleProps({
+          className: classNames('cell-inner', {
+            'text-overview': column.textOverview,
+          }),
+        })}
+      >
         {column.render('Header')}
 
         <If condition={column.isSorted}>
@@ -74,9 +76,13 @@ function TableHeaderGroup({ headerGroup }) {
  */
 export default function TableHeader() {
   const {
-    table: { headerGroups },
+    table: { headerGroups, page },
+    props: { TableHeaderSkeletonRenderer, headerLoading },
   } = useContext(TableContext);
 
+  if (headerLoading && TableHeaderSkeletonRenderer) {
+    return <TableHeaderSkeletonRenderer />;
+  }
   return (
     <ScrollSyncPane>
       <div className="thead">

client/src/components/Datatable/TableHeaderSkeleton.js

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react';
+import TableContext from './TableContext';
+import { Skeleton } from 'components';
+
+function TableHeaderCell({ column }) {
+  const { skeletonWidthMax = 100, skeletonWidthMin = 40 } = column;
+
+  return (
+    <div
+      {...column.getHeaderProps({
+        className: 'th',
+      })}
+    >
+      <Skeleton minWidth={skeletonWidthMin} maxWidth={skeletonWidthMax} />
+    </div>
+  );
+}
+
+/**
+ * Table skeleton rows.
+ */
+export default function TableSkeletonHeader({}) {
+  const {
+    table: { headerGroups },
+  } = useContext(TableContext);
+
+  return (
+    <div class="thead">
+      {headerGroups.map((headerGroup) => (
+        <div
+          {...headerGroup.getHeaderGroupProps({
+            className: 'tr',
+          })}
+        >
+          {headerGroup.headers.map((column) => (
+            <TableHeaderCell column={column} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

client/src/components/Datatable/TableRows.js

@@ -9,7 +9,7 @@ export default function TableRows() {
     table: { prepareRow, page },
     props: { TableRowRenderer, TableCellRenderer },
   } = useContext(TableContext);
-  
+
   return page.map((row) => {
     prepareRow(row);
     return <TableRowRenderer row={row} TableCellRenderer={TableCellRenderer} />;

client/src/components/Datatable/TableSkeletonRows.js

@@ -0,0 +1,44 @@
+import React, { useContext } from 'react';
+import TableContext from './TableContext';
+import { Skeleton } from 'components';
+
+/**
+ * Table header cell.
+ */
+function TableHeaderCell({ column }) {
+  const { skeletonWidthMax = 100, skeletonWidthMin = 40 } = column;
+
+  return (
+    <div
+      {...column.getHeaderProps({
+        className: 'td',
+      })}
+    >
+      <Skeleton minWidth={skeletonWidthMin} maxWidth={skeletonWidthMax} />
+    </div>
+  );
+}
+
+/**
+ * Table skeleton rows.
+ */
+export default function TableSkeletonRows({}) {
+  const {
+    table: { headerGroups },
+  } = useContext(TableContext);
+  const skeletonRows = 10;
+
+  return Array.from({ length: skeletonRows }).map(() => {
+    return headerGroups.map((headerGroup) => (
+      <div
+        {...headerGroup.getHeaderGroupProps({
+          className: 'tr',
+        })}
+      >
+        {headerGroup.headers.map((column) => (
+          <TableHeaderCell column={column} />
+        ))}
+      </div>
+    ));
+  });
+}