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 { DashboardPanelProps } from '@deephaven/dashboard';
 import { Panel } from '@deephaven/dashboard-core-plugins';
+import { LoadingOverlay } from '@deephaven/components';
 import { emitPortalClosed, emitPortalOpened } from './PortalPanelEvent';
 
 /**
@@ -27,7 +28,13 @@ function PortalPanel({
 
   return (
     <Panel glContainer={glContainer} glEventHub={glEventHub}>
-      <div className="ui-portal-panel" ref={ref} />
+      <div className="ui-portal-panel" ref={ref}>
+        {/* This will be hidden by CSS if it has any siblings (i.e., once the panel contents mount) */}
+        {/* Without this, we show a blank panel while re-hydrating instead of a loading spinner */}
+        <div className="ui-portal-panel-loader">
+          <LoadingOverlay />
+        </div>
+      </div>
     </Panel>
   );
 }

plugins/ui/src/js/src/styles.scss

@@ -7,6 +7,11 @@
   overflow: hidden;
 }
 
+// Hide if the loader has any siblings
+.ui-portal-panel-loader:has(+ *) {
+  display: none;
+}
+
 .ui-table-container {
   // If all browsers properly supported 'stretch' for height and width
   // we could swap to that, but right now only Chrome properly implements it.

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.
  */