From 141dd714ec051832da5114997fcb61ca79cdfb94 Mon Sep 17 00:00:00 2001
From: Matt Gallo <mdgallo@us.ibm.com>
Date: Wed, 24 Jul 2024 15:38:13 -0400
Subject: [PATCH 1/2] fix(Datagrid): show skeleton body for fetching and global
 filter state

---
 .../components/Datagrid/styles/_datagrid.scss | 27 +++++++++
 .../Datagrid/Datagrid/DatagridBody.tsx        |  6 ++
 .../Datagrid/Datagrid/DatagridContent.tsx     |  4 ++
 .../Datagrid/DatagridSkeletonBody.tsx         | 59 +++++++++++++++++++
 .../src/components/Datagrid/types/index.ts    | 15 ++++-
 5 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSkeletonBody.tsx

diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss
index 45ac55e3a8..5fdeaa4b72 100644
--- a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss
+++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss
@@ -271,6 +271,10 @@
     background-color: $layer-01;
   }
 
+  table.#{$block-class}__table-simple.#{$block-class}__fetching-no-data {
+    overflow: hidden;
+  }
+
   .#{$block-class}__head {
     display: flex;
   }
@@ -879,3 +883,26 @@
 .#{$block-class} .#{$block-class}__table-row-ai-enabled {
   width: $spacing-05;
 }
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  td.#{$block-class}__skeleton-body-cell {
+  display: flex;
+  height: 100%;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  td.#{$block-class}__skeleton-body-cell.#{$block-class}__last-visible-cell {
+  flex: 1 1 0;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  td.#{$block-class}__skeleton-body-cell.#{$block-class}__select-or-expander-cell {
+  width: $spacing-09;
+  padding-right: $spacing-05;
+  padding-left: $spacing-05;
+}
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridBody.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridBody.tsx
index 678495c1f9..fcd18bc7d7 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridBody.tsx
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridBody.tsx
@@ -11,6 +11,7 @@ import DatagridVirtualBody from './DatagridVirtualBody';
 import DatagridSimpleBody from './DatagridSimpleBody';
 import DatagridRefBody from './DatagridRefBody';
 import { DataGridState } from '../types';
+import { DatagridSkeletonBody } from './DatagridSkeletonBody';
 
 const DatagridBody = (datagridState: DataGridState) => {
   const {
@@ -18,8 +19,13 @@ const DatagridBody = (datagridState: DataGridState) => {
     rows = [],
     withVirtualScroll,
     withStickyColumn,
+    initialState,
   } = datagridState;
 
+  if (isFetching && initialState?.globalFilter) {
+    return <DatagridSkeletonBody {...datagridState} />;
+  }
+
   if (!isFetching && rows.length === 0) {
     return <DatagridEmptyBody {...datagridState} />;
   }
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.tsx
index 6f462d948f..95bd5dc1f0 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.tsx
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.tsx
@@ -140,6 +140,10 @@ export const DatagridContent = ({
               [`${blockClass}__table-is-resizing`]:
                 typeof columnResizing?.isResizingColumn === 'string',
             },
+            {
+              [`${blockClass}__fetching-no-data`]:
+                isFetching && !contentRows.length,
+            },
             getTableProps?.().className
           )}
           {...{
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSkeletonBody.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSkeletonBody.tsx
new file mode 100644
index 0000000000..7b160df14b
--- /dev/null
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSkeletonBody.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { SkeletonText, TableBody, TableCell, TableRow } from '@carbon/react';
+import { Cell } from 'react-table';
+import { DataGridState } from '../types';
+import cx from 'classnames';
+import { pkg } from '../../../settings';
+
+const blockClass = `${pkg.prefix}--datagrid`;
+
+export const DatagridSkeletonBody = (datagridState: DataGridState) => {
+  const { prepareRow, visibleColumns, skeletonRowCount } = datagridState;
+  const rowsWithSkeletons = [
+    ...Array.from({ length: skeletonRowCount || 5 }, (v, i) => ({
+      isSkeleton: true,
+      values: 'skeleton',
+      id: `skeleton-row-${i + 1}`,
+    })),
+  ];
+  return (
+    <TableBody>
+      {rowsWithSkeletons?.map((skeleton) => {
+        prepareRow(skeleton as any);
+        return (
+          <TableRow
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+            key={skeleton.id}
+          >
+            {(skeleton as any)?.cells?.map((cell: Cell, index: number) => {
+              return (
+                <TableCell
+                  key={`skeleton-${index}`}
+                  className={cx(`${blockClass}__skeleton-body-cell`, {
+                    [`${blockClass}__last-visible-cell`]:
+                      index === visibleColumns.length - 1,
+                    [`${blockClass}__select-or-expander-cell`]:
+                      cell.column.id === 'datagridSelection' ||
+                      cell.column.id === 'expander',
+                  })}
+                  style={{
+                    width:
+                      cell.column.id === 'datagridSelection' ||
+                      cell.column.id === 'expander'
+                        ? 48
+                        : cell.column.width,
+                  }}
+                >
+                  <SkeletonText />
+                </TableCell>
+              );
+            })}
+          </TableRow>
+        );
+      })}
+    </TableBody>
+  );
+};
diff --git a/packages/ibm-products/src/components/Datagrid/types/index.ts b/packages/ibm-products/src/components/Datagrid/types/index.ts
index 55c47d4346..a2ab1d6009 100644
--- a/packages/ibm-products/src/components/Datagrid/types/index.ts
+++ b/packages/ibm-products/src/components/Datagrid/types/index.ts
@@ -40,6 +40,7 @@ import {
   UseSortByColumnProps,
   UseSortByOptions,
   UseTableHooks,
+  UseTableOptions,
 } from 'react-table';
 import { CarbonIconType } from '@carbon/react/icons';
 import { IconButton, type ButtonProps } from '@carbon/react';
@@ -201,6 +202,7 @@ interface DataGridTableState
 
 export interface DataGridTableInstance<T extends object = any>
   extends Omit<TableInstance<T>, 'state'>,
+    Omit<UseTableOptions<T>, 'columns'>,
     Partial<UsePaginationInstanceProps<any>> {
   shouldDisableSelectRow?: (...args) => void | boolean;
   state?: Partial<TableState & UseRowSelectState<any>>;
@@ -211,6 +213,8 @@ export interface DataGridTableInstance<T extends object = any>
     };
   };
   withSelectRows?: boolean;
+  isFetching?: boolean;
+  skeletonRowCount?: number;
 }
 
 export interface RowAction {
@@ -226,7 +230,10 @@ export interface RowAction {
 export interface DataGridState<T extends object = any>
   extends TableCommonProps,
     UsePaginationInstanceProps<T>,
-    Omit<TableInstance<T>, 'state' | 'headers' | 'rows' | 'columns'>,
+    Omit<
+      TableInstance<T>,
+      'state' | 'headers' | 'rows' | 'columns' | 'initialState'
+    >,
     Omit<UseFiltersInstanceProps<T>, 'rows'>,
     UseRowSelectInstanceProps<T>,
     Pick<UseRowSelectInstanceProps<T>, 'toggleAllRowsSelected'> {
@@ -325,6 +332,12 @@ export interface DataGridState<T extends object = any>
     event: React.MouseEvent<HTMLElement>
   ) => void;
   ExpandedRowContentComponent?: JSXElementConstructor<any>;
+  skeletonRowCount?: number;
+  // initialState?: Partial<TableState<T>>
+  initialState?: {
+    globalFilter?: string;
+  };
+  withSelectRows?: boolean;
 }
 
 export interface DataGridData {

From 2d0a669b0992e992ce27f202e40db10601435e72 Mon Sep 17 00:00:00 2001
From: Matt Gallo <mdgallo@us.ibm.com>
Date: Wed, 24 Jul 2024 15:39:42 -0400
Subject: [PATCH 2/2] chore: remove comment

---
 packages/ibm-products/src/components/Datagrid/types/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ibm-products/src/components/Datagrid/types/index.ts b/packages/ibm-products/src/components/Datagrid/types/index.ts
index a2ab1d6009..c5fe4f134f 100644
--- a/packages/ibm-products/src/components/Datagrid/types/index.ts
+++ b/packages/ibm-products/src/components/Datagrid/types/index.ts
@@ -333,7 +333,6 @@ export interface DataGridState<T extends object = any>
   ) => void;
   ExpandedRowContentComponent?: JSXElementConstructor<any>;
   skeletonRowCount?: number;
-  // initialState?: Partial<TableState<T>>
   initialState?: {
     globalFilter?: string;
   };