Supports DataGrid loading state (#1456)

## 📝 Changes

- Supports for loading state

## ✅ Checklist

Easy UI has certain UX standards that must be met. In general,
non-trivial changes should meet the following criteria:

- [x] Visuals match Design Specs in Figma
- [x] Stories accompany any component changes
- [x] Code is in accordance with our style guide
- [x] Design tokens are utilized
- [x] Unit tests accompany any component changes
- [x] TSDoc is written for any API surface area
- [x] Specs are up-to-date
- [x] Console is free from warnings
- [x] No accessibility violations are reported
- [x] Cross-browser check is performed (Chrome, Safari, Firefox)
- [x] Changeset is added

~Strikethrough~ any items that are not applicable to this pull request.

---------

Co-authored-by: Kevin Liu <kliu@easypost.com>

.changeset/pretty-seals-flow.md

@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": minor
+---
+
+Supports DataGrid loading state

documentation/specs/DataGrid.md

@@ -117,6 +117,12 @@ type DataGridProps<C extends Column> = AriaLabelingProps & {
 
   /** The current sorted column and direction. */
   sortDescriptor?: SortDescriptor;
+
+  /**
+   * Whether the table is currently loading.
+   * @default false
+   */
+  isLoading?: boolean;
 };
 
 type MenuRowAction = {

easy-ui-react/src/DataGrid/DataGrid.mdx

@@ -83,6 +83,7 @@ const rows = [
   columnKeysAllowingSort={["name"]}
   // "sm", "md" (default), or "lg"
   size="lg"
+  isLoading={false}
 />;
 ```
 
@@ -247,6 +248,14 @@ In the example below, to make the status text green or red depending on whether
 
 <Canvas of={DataGridStories.EmptyState} />
 
+## Loading State
+
+`DataGrid` supports rendering loading state through `isLoading` prop.
+
+<Canvas of={DataGridStories.LoadingState} />
+
+<Controls of={DataGridStories.LoadingState} />
+
 ## Properties
 
 ### DataGrid

easy-ui-react/src/DataGrid/DataGrid.stories.tsx

@@ -310,6 +310,20 @@ export const EmptyState: Story = {
   },
 };
 
+export const LoadingState: Story = {
+  render: Template.bind({}),
+  args: {
+    "aria-label": "Example data grid loading state",
+    isLoading: true,
+    rows: [],
+  },
+  parameters: {
+    controls: {
+      include: ["isLoading"],
+    },
+  },
+};
+
 function WithSortTemplate(args: Partial<DataGridProps>) {
   // https://react-spectrum.adobe.com/react-stately/useAsyncList.html
   const list = useAsyncList({

easy-ui-react/src/DataGrid/DataGrid.test.tsx

@@ -225,6 +225,17 @@ describe("<DataGrid />", () => {
       screen.getByRole("gridcell", { name: /no data yet/i }),
     ).toBeInTheDocument();
   });
+
+  it("should render a loading state", () => {
+    render(
+      createDataGrid({
+        isLoading: true,
+      }),
+    );
+    expect(
+      screen.getByRole("status", { name: /loading/i }),
+    ).toBeInTheDocument();
+  });
 });
 
 const columns = [

easy-ui-react/src/DataGrid/Table.tsx

@@ -18,6 +18,7 @@ import { DataGridTableContext } from "./context";
 import { Column, DataGridProps } from "./types";
 import { useEdgeInterceptors } from "./useEdgeInterceptors";
 import { useExpandedRow } from "./useExpandedRow";
+import { Spinner } from "../Spinner";
 
 import styles from "./DataGrid.module.scss";
 
@@ -33,6 +34,7 @@ export function Table<C extends Column>(props: TableProps<C>) {
     selectionMode,
     size = DEFAULT_SIZE,
     renderEmptyState = () => "No Data!",
+    isLoading = false,
   } = props;
 
   const outerContainerRef = useRef<HTMLDivElement | null>(null);
@@ -122,25 +124,34 @@ export function Table<C extends Column>(props: TableProps<C>) {
               ))}
             </RowGroup>
             <RowGroup as="tbody">
-              {collection.size === 0 && (
+              {collection.size === 0 || isLoading ? (
                 <StaticRow>
                   <StaticCell colSpan={collection.columnCount}>
-                    {renderEmptyState()}
+                    {isLoading ? (
+                      <Spinner isIndeterminate size="sm">
+                        Loading..
+                      </Spinner>
+                    ) : (
+                      renderEmptyState()
+                    )}
                   </StaticCell>
                 </StaticRow>
+              ) : (
+                [...collection.body.childNodes].map((row) => (
+                  <Row
+                    key={row.key}
+                    item={row}
+                    state={state}
+                    isExpanded={
+                      expandedRow ? expandedRow.key === row.key : false
+                    }
+                  >
+                    {[...row.childNodes].map((cell) => (
+                      <Cell key={cell.key} cell={cell} state={state} />
+                    ))}
+                  </Row>
+                ))
               )}
-              {[...collection.body.childNodes].map((row) => (
-                <Row
-                  key={row.key}
-                  item={row}
-                  state={state}
-                  isExpanded={expandedRow ? expandedRow.key === row.key : false}
-                >
-                  {[...row.childNodes].map((cell) => (
-                    <Cell key={cell.key} cell={cell} state={state} />
-                  ))}
-                </Row>
-              ))}
             </RowGroup>
           </table>
           {expandedRow && (

easy-ui-react/src/DataGrid/types.d.ts

@@ -129,4 +129,10 @@ export type DataGridProps<C extends Column = Column> = AriaLabelingProps & {
    * @default "No Data"
    */
   renderEmptyState?: () => ReactNode;
+
+  /**
+   * Whether the table is currently loading.
+   * @default false
+   */
+  isLoading?: boolean;
 };