From 5b306db9c2d411b5375240ec6936fd051e5c3cfd Mon Sep 17 00:00:00 2001
From: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
Date: Thu, 1 Aug 2024 17:29:03 -0400
Subject: [PATCH] HPCC-32285 ECL Watch v9 file contents displays empty when
 loading

workaround for an issue in @hpcc-js/dgrid(-shim?), where ECL Watch will
display "...empty..." while the contents of a file are being loaded in
the dgrid component, instead of the expected "loading..." message

this change circumvents the dgrid's messaging by displaying a Fluent UI
Spinner until the call to result.fetchXMLScheme(...) resolves

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

diff --git a/esp/src/src-react/components/Result.tsx b/esp/src/src-react/components/Result.tsx
index a9d47294417..3490153b800 100644
--- a/esp/src/src-react/components/Result.tsx
+++ b/esp/src/src-react/components/Result.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { Checkbox, CommandBar, ContextualMenuItemType, DefaultButton, Dialog, DialogFooter, DialogType, ICommandBarItemProps, PrimaryButton, SpinButton, Stack } from "@fluentui/react";
+import { Checkbox, CommandBar, ContextualMenuItemType, DefaultButton, Dialog, DialogFooter, DialogType, ICommandBarItemProps, PrimaryButton, SpinButton, Spinner, Stack } from "@fluentui/react";
 import { useConst } from "@fluentui/react-hooks";
 import { Result as CommsResult, XSDXMLNode } from "@hpcc-js/comms";
 import { scopedLogger } from "@hpcc-js/util";
@@ -247,6 +247,7 @@ export const Result: React.FunctionComponent<ResultProps> = ({
     const [wu] = useWorkunit(wuid);
     const [result, setResult] = React.useState<CommsResult>(resultTable.calcResult());
     const [FilterFields, setFilterFields] = React.useState<Fields>({});
+    const [loading, setLoading] = React.useState(true);
     const [showFilter, setShowFilter] = React.useState(false);
 
     React.useEffect(() => {
@@ -276,6 +277,7 @@ export const Result: React.FunctionComponent<ResultProps> = ({
                 };
             });
             setFilterFields(filterFields);
+            setLoading(false);
         }).catch(err => {
             logger.error(err);
             if (err.message.indexOf("Cannot open the workunit result") > -1) {
@@ -370,7 +372,10 @@ export const Result: React.FunctionComponent<ResultProps> = ({
         header={<CommandBar items={buttons} farItems={rightButtons} />}
         main={
             <>
-                <AutosizeHpccJSComponent widget={resultTable} />
+                {loading ?
+                    <Spinner label={nlsHPCC.Loading} /> :
+                    <AutosizeHpccJSComponent widget={resultTable} />
+                }
                 <Filter showFilter={showFilter} setShowFilter={setShowFilter} filterFields={filterFields} onApply={pushParams} />
                 <ViewHTMLConfirm />
             </>