Merge of #4154

winglang · Sep 14, 2023 · 6a4a1dd · 6a4a1dd
2 parents f04de6b + 98b7e82
commit 6a4a1dd
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/apps/wing-console/console/app/playwright.config.ts b/apps/wing-console/console/app/playwright.config.ts
@@ -14,6 +14,7 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: [["html", { open: "never" }]],
+  timeout: 30_000,
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */

diff --git a/apps/wing-console/console/app/test/describe.ts b/apps/wing-console/console/app/test/describe.ts
@@ -37,6 +37,10 @@ export const describe = (wingfile: string, callback: () => void) => {
     await page.goto(`http://localhost:${server.port}/`);
 
     await page.waitForLoadState("domcontentloaded");
+
+    await page
+      .getByTestId("loading-overlay")
+      .waitFor({ state: "detached", timeout: 10_000 });
   });
 
   test.afterEach(() => {

diff --git a/apps/wing-console/console/ui/src/layout/default-layout.tsx b/apps/wing-console/console/ui/src/layout/default-layout.tsx
@@ -107,7 +107,7 @@ export const DefaultLayout = ({
 
   const { loading: deferredLoading, setLoading: setDeferredLoading } =
     useLoading({
-      delay: 500,
+      delay: 800,
       duration: 100,
     });
   useEffect(() => {
@@ -279,6 +279,10 @@ export const DefaultLayout = ({
 
           {renderApp && (
             <>
+              {loading && (
+                <div data-testid="loading-overlay" className="fixed inset-0" />
+              )}
+
               <div className="flex-1 flex relative gap-0.5">
                 <div
                   className={classNames(
@@ -287,7 +291,6 @@ export const DefaultLayout = ({
                     deferredLoading && "opacity-100 z-50",
                     !deferredLoading && "opacity-100 -z-10",
                   )}
-                  data-testid="loading-overlay"
                 >
                   <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                     <SpinnerLoader data-testid="main-view-loader" />