From ebb6de77d5ef7f5dddc50de39c4da84748eefae0 Mon Sep 17 00:00:00 2001
From: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
Date: Tue, 3 Dec 2024 15:17:21 -0500
Subject: [PATCH] HPCC-33070 ECL Watch v9 use shimmered grids

change the Grid component (used on WU, FIle & Query) list pages to
use FluentUI's shimmer animation to indicate when the grid's content
is being updated

Signed-off-by: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
---
 esp/src/src-react/components/controls/Grid.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/esp/src/src-react/components/controls/Grid.tsx b/esp/src/src-react/components/controls/Grid.tsx
index cbbf129f7d9..edf105beb6f 100644
--- a/esp/src/src-react/components/controls/Grid.tsx
+++ b/esp/src/src-react/components/controls/Grid.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { DetailsList, DetailsListLayoutMode, Dropdown, IColumn as _IColumn, ICommandBarItemProps, IDetailsHeaderProps, IDetailsListStyles, mergeStyleSets, Selection, Stack, TooltipHost, TooltipOverflowMode, IRenderFunction, IDetailsRowProps, SelectionMode, ConstrainMode, ISelection, ScrollablePane, Sticky } from "@fluentui/react";
+import { DetailsListLayoutMode, Dropdown, IColumn as _IColumn, ICommandBarItemProps, IDetailsHeaderProps, IDetailsListStyles, mergeStyleSets, Selection, Stack, TooltipHost, TooltipOverflowMode, IRenderFunction, IDetailsRowProps, SelectionMode, ConstrainMode, ISelection, ScrollablePane, ShimmeredDetailsList, Sticky } from "@fluentui/react";
 import { Pagination } from "@fluentui/react-experiments/lib/Pagination";
 import { useConst } from "@fluentui/react-hooks";
 import { BaseStore, Memory, QueryRequest, QuerySortItem } from "src/store/Memory";
@@ -227,6 +227,7 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
     const memoizedColumns = useDeepMemo(() => columns, [], [columns]);
     const [sorted, setSorted] = React.useState<QuerySortItem>(sort);
     const [items, setItems] = React.useState<any[]>([]);
+    const [loaded, setLoaded] = React.useState(false);
     const [columnWidths] = useNonReactiveEphemeralPageStore("columnWidths");
 
     const selectionHandler = useConst(() => {
@@ -257,6 +258,7 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
         });
         storeQuery.then(items => {
             const selectedIndices = selectionHandler.getSelectedIndices();
+            setLoaded(true);
             setItems(items);
             selectedIndices.forEach(index => selectionHandler.setIndexSelected(index, true, false));
         });
@@ -319,8 +321,9 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
 
     return <div style={{ position: "relative", height: "100%" }}>
         <ScrollablePane>
-            <DetailsList
+            <ShimmeredDetailsList
                 compact={true}
+                enableShimmer={!loaded}
                 items={items}
                 columns={fluentColumns}
                 layoutMode={DetailsListLayoutMode.fixedColumns}