From f0b32c28f9081ab374a4040c91de664ad90fdee9 Mon Sep 17 00:00:00 2001
From: Developing-Gamer <maxcodes11110@gmail.com>
Date: Tue, 14 Jul 2026 11:08:31 -0700
Subject: [PATCH] Test DataGrid schema-pending loading skeleton.

Cover both the pre-schema shimmer and the per-column skeleton path once columns are discovered.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/data-grid/data-grid.test.tsx   | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/packages/dashboard-ui-components/src/components/data-grid/data-grid.test.tsx b/packages/dashboard-ui-components/src/components/data-grid/data-grid.test.tsx
index a7e5c4e65..e2a4bf133 100644
--- a/packages/dashboard-ui-components/src/components/data-grid/data-grid.test.tsx
+++ b/packages/dashboard-ui-components/src/components/data-grid/data-grid.test.tsx
@@ -611,3 +611,60 @@ describe("DataGrid horizontal scrolling", () => {
     expect((bodyScroll as HTMLElement).scrollLeft).toBe(120);
   });
 });
+
+describe("DataGrid loading skeleton", () => {
+  beforeEach(() => {
+    vi.stubGlobal("ResizeObserver", MockResizeObserver);
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("shows a full-width shimmer when loading before any columns are known", () => {
+    function SchemaPendingHarness() {
+      const [state, setState] = useState(() => createDefaultDataGridState([]));
+      return (
+        <DataGrid<Row>
+          columns={[]}
+          rows={[]}
+          getRowId={(row) => row.id}
+          state={state}
+          onChange={setState}
+          isLoading
+        />
+      );
+    }
+
+    const { container } = render(<SchemaPendingHarness />);
+
+    const skeleton = container.querySelector("[data-data-grid-schema-pending-skeleton]");
+    expect(skeleton).toBeInstanceOf(HTMLElement);
+    // Five placeholder columns × 10 rows → visible shimmer cells, not an empty pane.
+    expect(skeleton?.querySelectorAll("[role='row']").length).toBe(10);
+  });
+
+  it("uses per-column skeleton rows once the schema is known", () => {
+    function KnownSchemaHarness() {
+      const [state, setState] = useState(() => createDefaultDataGridState(columns));
+      return (
+        <DataGrid<Row>
+          columns={columns}
+          rows={[]}
+          getRowId={(row) => row.id}
+          state={state}
+          onChange={setState}
+          isLoading
+        />
+      );
+    }
+
+    const { container } = render(<KnownSchemaHarness />);
+
+    expect(container.querySelector("[data-data-grid-schema-pending-skeleton]")).toBeNull();
+    const rowsClip = container.querySelector("[data-data-grid-rows-clip]");
+    expect(rowsClip?.querySelectorAll("[role='row']").length).toBe(8);
+  });
+});