fix: Loading spinner would flash sometimes on startup (#2569)

- We were not displaying the loading spinner for a brief moment in
ConnectionBootstrap
- Added unit test to verify spinner was being shown (previously was not
verifying the spinner itself was shown, just that the loading overlay
was shown)
- Tested using visual inspection
- Added Playwright test to poll startup every 5ms to ensure the loading
spinner is displayed until the app is loaded
- Should fix an issue with deephaven-plugins e2e tests currently failing
inconsistently

Author: mofojed

packages/app-utils/src/components/AppBootstrap.test.tsx

@@ -165,6 +165,7 @@ it('should log in automatically when the anonymous handler is supported', async
   expectMockChild().toBeNull();
   expect(mockLogin).toHaveBeenCalled();
   expect(screen.queryByTestId('auth-base-loading')).not.toBeNull();
+  expect(screen.queryByTestId('auth-base-loading-spinner')).not.toBeNull();
 
   // Wait for login to complete
   await act(async () => {
@@ -173,6 +174,9 @@ it('should log in automatically when the anonymous handler is supported', async
 
   expect(screen.queryByTestId('auth-base-loading')).toBeNull();
   expect(screen.queryByTestId('connection-bootstrap-loading')).not.toBeNull();
+  expect(
+    screen.queryByTestId('connection-bootstrap-loading-spinner')
+  ).not.toBeNull();
   expect(screen.queryByText(mockChildText)).toBeNull();
   expect(mockChannel.postMessage).toHaveBeenCalledWith(
     expect.objectContaining({

packages/app-utils/src/components/ConnectionBootstrap.tsx

@@ -206,7 +206,7 @@ export function ConnectionBootstrap({
     return (
       <LoadingOverlay
         data-testid="connection-bootstrap-loading"
-        isLoading={false}
+        isLoading={error == null}
         errorMessage={error != null ? `${error}` : undefined}
       />
     );

packages/code-studio/src/main/App.tsx

@@ -4,7 +4,7 @@ import AppMainContainer from './AppMainContainer';
 
 function App(): ReactElement {
   return (
-    <div className="app">
+    <div className="app" data-testid="app-loaded">
       <AppMainContainer />
       <ToastContainer />
     </div>

tests/app.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test';
+import { gotoPage } from './utils';
+
+test.describe('app loading tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoPage(page, '');
+  });
+
+  test('initial dashboard is immediately ready after `gotoPage` has completed', async ({
+    page,
+  }) => {
+    await page.goto('');
+
+    // Now poll every 5ms to see if the app has finished loading. Until it has finished loading, a loading spinner should be visible.
+    await expect
+      .poll(
+        async () => {
+          const isSpinnerVisible = await page
+            .getByRole('progressbar', { name: 'Loading...', exact: true })
+            .isVisible();
+          const isAppLoaded =
+            (await page.getByTestId('app-loaded').count()) === 1;
+          if (!isSpinnerVisible && !isAppLoaded) {
+            throw new Error(
+              'App is in an invalid state: no spinner and app not loaded'
+            );
+          }
+          return isAppLoaded;
+        },
+        {
+          intervals: [5],
+        }
+      )
+      .toBe(true);
+  });
+});