From 870b6f6f8794429f2a83ca8306e08fd419e6fb52 Mon Sep 17 00:00:00 2001
From: Matthew Runyon <matthewrunyon@deephaven.io>
Date: Fri, 15 Nov 2024 23:54:41 -0600
Subject: [PATCH] Fix e2e tests

---
 plugins/ui/src/js/src/layout/PortalPanel.tsx | 24 +++++++++++++++-----
 plugins/ui/src/js/src/styles.scss            |  5 ----
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/plugins/ui/src/js/src/layout/PortalPanel.tsx b/plugins/ui/src/js/src/layout/PortalPanel.tsx
index 04beb687f..d87d70ced 100644
--- a/plugins/ui/src/js/src/layout/PortalPanel.tsx
+++ b/plugins/ui/src/js/src/layout/PortalPanel.tsx
@@ -1,4 +1,4 @@
-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';
@@ -13,15 +13,31 @@ 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]);
@@ -29,11 +45,7 @@ function PortalPanel({
   return (
     <Panel glContainer={glContainer} glEventHub={glEventHub}>
       <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>
+        {!contentHasMounted ? <LoadingOverlay /> : null}
       </div>
     </Panel>
   );
diff --git a/plugins/ui/src/js/src/styles.scss b/plugins/ui/src/js/src/styles.scss
index f34919d46..840d7991d 100644
--- a/plugins/ui/src/js/src/styles.scss
+++ b/plugins/ui/src/js/src/styles.scss
@@ -7,11 +7,6 @@
   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.