feat: Show loading spinners immediately in ui

plugins/ui/src/js/src/DashboardPlugin.tsx

@@ -27,10 +27,12 @@ import {
 import PortalPanel from './layout/PortalPanel';
 import PortalPanelManager from './layout/PortalPanelManager';
 import DashboardWidgetHandler from './widget/DashboardWidgetHandler';
-import { getPreservedData } from './widget/WidgetUtils';
+import {
+  getPreservedData,
+  DASHBOARD_ELEMENT,
+  WIDGET_ELEMENT,
+} from './widget/WidgetUtils';
 
-const NAME_ELEMENT = 'deephaven.ui.Element';
-const DASHBOARD_ELEMENT = 'deephaven.ui.Dashboard';
 const PLUGIN_NAME = '@deephaven/js-plugin-ui.DashboardPlugin';
 
 const log = Log.module('@deephaven/js-plugin-ui.DashboardPlugin');
@@ -119,7 +121,7 @@ export function DashboardPlugin(
       const { type } = widget;
 
       switch (type) {
-        case NAME_ELEMENT: {
+        case WIDGET_ELEMENT: {
           handleWidgetOpen({ widgetId, widget });
           break;
         }

plugins/ui/src/js/src/layout/PortalPanel.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { DashboardPanelProps } from '@deephaven/dashboard';
 import { Panel } from '@deephaven/dashboard-core-plugins';
+import { LoadingOverlay } from '@deephaven/components';
 import { emitPortalClosed, emitPortalOpened } from './PortalPanelEvent';
 
 /**
@@ -12,22 +13,40 @@ function PortalPanel({
   glEventHub,
 }: DashboardPanelProps): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
+  const [contentHasMounted, setContentHasMounted] = useState(false);
 
   useEffect(() => {
     const { current } = ref;
     if (current == null) {
       return;
     }
+
+    // When the page loads, this component loads from golden-layout, but the content
+    // does not load until the components are rendered on the server.
+    // Show a loading overlay until the content is mounted to handle its own loading state
+    const mutationObserver = new MutationObserver((mutationList, observer) => {
+      mutationList.forEach(mutation => {
+        if (mutation.addedNodes.length > 0) {
+          setContentHasMounted(true);
+          observer.disconnect();
+        }
+      });
+    });
+    mutationObserver.observe(current, { childList: true });
+
     emitPortalOpened(glEventHub, { container: glContainer, element: current });
 
     return () => {
+      mutationObserver.disconnect();
       emitPortalClosed(glEventHub, { container: glContainer });
     };
   }, [glContainer, glEventHub]);
 
   return (
     <Panel glContainer={glContainer} glEventHub={glEventHub}>
-      <div className="ui-portal-panel" ref={ref} />
+      <div className="ui-portal-panel" ref={ref}>
+        {!contentHasMounted ? <LoadingOverlay /> : null}
+      </div>
     </Panel>
   );
 }

plugins/ui/src/js/src/widget/WidgetHandler.tsx

@@ -37,11 +37,16 @@ import {
   METHOD_DOCUMENT_UPDATED,
 } from './WidgetTypes';
 import DocumentHandler from './DocumentHandler';
-import { getComponentForElement, wrapCallable } from './WidgetUtils';
+import {
+  getComponentForElement,
+  WIDGET_ELEMENT,
+  wrapCallable,
+} from './WidgetUtils';
 import WidgetStatusContext, {
   WidgetStatus,
 } from '../layout/WidgetStatusContext';
 import WidgetErrorView from './WidgetErrorView';
+import ReactPanel from '../layout/ReactPanel';
 
 const log = Log.module('@deephaven/js-plugin-ui/WidgetHandler');
 
@@ -77,7 +82,12 @@ function WidgetHandler({
     setIsLoading(true);
   }
 
-  const [document, setDocument] = useState<ReactNode>();
+  // Default to a single panel so we can immediately show a loading spinner
+  // The panel will be replaced with the first actual panel when the document loads
+  // Dashboards already have a loader and the placeholder panel causes an error
+  const [document, setDocument] = useState<ReactNode>(
+    widgetDescriptor.type === WIDGET_ELEMENT ? <ReactPanel /> : null
+  );
 
   // We want to update the initial data if the widget changes, as we'll need to re-fetch the widget and want to start with a fresh state.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -261,9 +271,16 @@ function WidgetHandler({
         const newError: WidgetError = JSON.parse(params[0]);
         newError.action = {
           title: 'Reload',
-          action: () => sendSetState(),
+          action: () => {
+            setInternalError(undefined);
+            setIsLoading(true);
+            sendSetState();
+          },
         };
-        setInternalError(newError);
+        unstable_batchedUpdates(() => {
+          setIsLoading(false);
+          setInternalError(newError);
+        });
       });
 
       return () => {
@@ -345,48 +362,34 @@ function WidgetHandler({
       return document;
     }
     if (error != null) {
-      // If there's an error and the document hasn't rendered yet, explicitly show an error view
+      // If there's an error and the document hasn't rendered yet (mostly applies to dashboards), explicitly show an error view
       return <WidgetErrorView error={error} />;
     }
-    return null;
+    return document;
   }, [document, error]);
 
   const widgetStatus: WidgetStatus = useMemo(() => {
-    if (error != null) {
-      return { status: 'error', descriptor: widgetDescriptor, error };
-    }
     if (isLoading) {
       return { status: 'loading', descriptor: widgetDescriptor };
     }
-    if (renderedDocument != null) {
-      return { status: 'ready', descriptor: widgetDescriptor };
+    if (error != null) {
+      return { status: 'error', descriptor: widgetDescriptor, error };
     }
-    return { status: 'loading', descriptor: widgetDescriptor };
-  }, [error, renderedDocument, widgetDescriptor, isLoading]);
-
-  return useMemo(
-    () =>
-      renderedDocument ? (
-        <WidgetStatusContext.Provider value={widgetStatus}>
-          <DocumentHandler
-            widget={widgetDescriptor}
-            initialData={initialData}
-            onDataChange={onDataChange}
-            onClose={onClose}
-          >
-            {renderedDocument}
-          </DocumentHandler>
-        </WidgetStatusContext.Provider>
-      ) : null,
-    [
-      widgetDescriptor,
-      renderedDocument,
-      initialData,
-      onClose,
-      onDataChange,
-      widgetStatus,
-    ]
-  );
+    return { status: 'ready', descriptor: widgetDescriptor };
+  }, [error, widgetDescriptor, isLoading]);
+
+  return renderedDocument != null ? (
+    <WidgetStatusContext.Provider value={widgetStatus}>
+      <DocumentHandler
+        widget={widgetDescriptor}
+        initialData={initialData}
+        onDataChange={onDataChange}
+        onClose={onClose}
+      >
+        {renderedDocument}
+      </DocumentHandler>
+    </WidgetStatusContext.Provider>
+  ) : null;
 }
 
 WidgetHandler.displayName = '@deephaven/js-plugin-ui/WidgetHandler';

plugins/ui/src/js/src/widget/WidgetUtils.tsx

@@ -82,6 +82,9 @@ import {
   Tabs,
 } from '../elements';
 
+export const WIDGET_ELEMENT = 'deephaven.ui.Element';
+export const DASHBOARD_ELEMENT = 'deephaven.ui.Dashboard';
+
 /**
  * Elements to implicitly wrap primitive children in <Text> components.
  */