Fix loader in showcase and add it to screenshots (#2710)

* Fix loader in showcase and add it to screenshots.

* Cast import to string

src/frontend/screenshots.ts

@@ -63,11 +63,6 @@ async function takeShowcaseScreenshots(browser: WebdriverIO.Browser) {
 
   // Iterate the pages and screenshot them
   for (const pageName of pageNames) {
-    // Skip the loader, because it's animated
-    if (pageName === "loader") {
-      continue;
-    }
-
     await visit(browser, `http://localhost:5174/${pageName}`);
 
     await browser.execute('document.body.style.caretColor = "transparent"');

src/frontend/src/components/loader.ts

@@ -1,13 +1,20 @@
 import { ERROR_SUPPORT_URL } from "$src/config";
 import { html, render } from "lit-html";
-import loaderUrl from "./loader.svg";
+
+// Use same import approach as in 'src/frontend/src/flows/dappsExplorer/dapps.ts'
+// this makes the import the same format (url string) in both the build and showcase.
+const loaderUrl = import.meta.glob("./loader.svg", {
+  eager: true,
+  query: "?url",
+  import: "default",
+})["./loader.svg"] as string;
 
 // Duration in milliseconds a user considers as taking forever
 const TAKING_FOREVER = 10000;
 
 const loader = (takingForever = false) =>
   html` <div id="loader" class="c-loader">
-    <img class="c-loader__image" src=${loaderUrl} alt="loading" />
+    <img class="c-loader__image" src="${loaderUrl}" alt="loading" />
     ${takingForever &&
     html`<a
       href="${ERROR_SUPPORT_URL}"
@@ -18,9 +25,9 @@ const loader = (takingForever = false) =>
     >`}
   </div>`;
 
-const startLoader = () => {
+const startLoader = (showCheckOngoingIssues?: boolean) => {
   const container = document.getElementById("loaderContainer") as HTMLElement;
-  render(loader(), container);
+  render(loader(showCheckOngoingIssues), container);
 
   const takingForeverTimeout = setTimeout(
     () => render(loader(true), container),
@@ -33,8 +40,11 @@ const startLoader = () => {
   };
 };
 
-export const withLoader = async <A>(action: () => Promise<A>): Promise<A> => {
-  const endLoader = startLoader();
+export const withLoader = async <A>(
+  action: () => Promise<A>,
+  showCheckOngoingIssues?: boolean
+): Promise<A> => {
+  const endLoader = startLoader(showCheckOngoingIssues);
   try {
     return await action();
   } finally {

src/frontend/src/styles/main.css

@@ -3149,6 +3149,7 @@ input[type="checkbox"] {
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
+  transform: translate(-50%, -50%);
 }
 
 .c-loader__link {

src/showcase/src/pages/loader.astro

@@ -7,7 +7,12 @@ import Screen from "../layouts/Screen.astro";
     import { withLoader } from "$src/components/loader";
     import { showMessage } from "$src/components/message";
 
-    // TODO: Fix loader image not loading
     withLoader(() => new Promise(() => showMessage({ message: "Loading..." })))
   </script>
+  <style>
+    /* Disable loader animation */
+    .c-loader__image {
+        animation: none;
+    }
+  </style>
 </Screen>

src/showcase/src/pages/loaderTakingForever.astro

@@ -0,0 +1,18 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Loader" pageName="loader">
+  <script>
+    import { withLoader } from "$src/components/loader";
+    import { showMessage } from "$src/components/message";
+
+    withLoader(() => new Promise(() => showMessage({ message: "Loading..." })), true)
+  </script>
+  <style>
+    /* Disable loader animation */
+    .c-loader__image {
+        animation: none;
+    }
+  </style>
+</Screen>