fix(Datagrid): show skeleton body for fetching and global filter state

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;
+}

packages/ibm-products/src/components/Datagrid/Datagrid/DatagridBody.tsx

@@ -11,15 +11,21 @@ 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 {
     isFetching,
     rows = [],
     withVirtualScroll,
     withStickyColumn,
+    initialState,
   } = datagridState;
 
+  if (isFetching && initialState?.globalFilter) {
+    return <DatagridSkeletonBody {...datagridState} />;
+  }
+
   if (!isFetching && rows.length === 0) {
     return <DatagridEmptyBody {...datagridState} />;
   }

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
           )}
           {...{

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>
+  );
+};

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,11 @@ export interface DataGridState<T extends object = any>
     event: React.MouseEvent<HTMLElement>
   ) => void;
   ExpandedRowContentComponent?: JSXElementConstructor<any>;
+  skeletonRowCount?: number;
+  initialState?: {
+    globalFilter?: string;
+  };
+  withSelectRows?: boolean;
 }
 
 export interface DataGridData {