refactor: loading page rework (@Miodec) (monkeytypegame#6885)

- Moved all loading page logic to the page controller. No other module
handles text or bar updating. The page controller displays either the
spinner or loading bar (depending on the configuration) inbetween the
source and target page. Once a promise resolves the page change
continues.
 - Pages can now say they require a loading page before opening the page
- Navigate function call can override that / add a loading page to any
page load
- Simplified account controller flow a lot - only one `navigate` call
remains
- Removed the preloader from the account page which simplifies things
aswell
 - Moved loading page styles

Author: Miodec

frontend/src/html/pages/account.html

@@ -1,14 +1,9 @@
 <div class="page pageAccount hidden full-width" id="pageAccount">
-  <div class="preloader hidden">
+  <div class="error hidden content-grid">
     <div class="icon">
-      <i class="fas fa-fw fa-spin fa-circle-notch"></i>
-    </div>
-    <div class="barWrapper hidden">
-      <div class="bar">
-        <div class="fill"></div>
-      </div>
-      <div class="text">‎</div>
+      <i class="fas fa-fw fa-times"></i>
     </div>
+    <div class="text">Error</div>
   </div>
   <div class="content full-width content-grid">
     <div class="profile">

frontend/src/styles/account.scss

@@ -1,6 +1,21 @@
 .pageAccount {
   height: 100%;
 
+  .error {
+    display: grid;
+    place-items: center;
+    align-content: center;
+    height: 100%;
+    .icon {
+      font-size: 2rem;
+      color: var(--error-color);
+    }
+    .text {
+      font-size: 1rem;
+      text-align: center;
+    }
+  }
+
   .accountVerificatinNotice {
     background: var(--bg-color);
     border-radius: var(--roundness);
@@ -23,13 +38,6 @@
     }
   }
 
-  .preloader {
-    align-self: center;
-    text-align: center;
-    align-items: center;
-    height: 100%;
-  }
-
   .content {
     gap: 2rem;
   }

frontend/src/styles/core.scss

@@ -208,42 +208,6 @@ key {
   align-items: center;
 }
 
-.pageLoading,
-.pageAccount {
-  .preloader {
-    text-align: center;
-    justify-self: center;
-    display: grid;
-    .barWrapper {
-      justify-content: center;
-      display: grid;
-      gap: 1rem;
-      grid-row: 1;
-      grid-column: 1;
-      .bar {
-        width: 20rem;
-        height: 0.5rem;
-        background: var(--sub-alt-color);
-        border-radius: var(--roundness);
-        .fill {
-          height: 100%;
-          width: 0%;
-          background: var(--main-color);
-          border-radius: var(--roundness);
-          // transition: 1s;
-        }
-      }
-    }
-    .icon {
-      grid-row: 1;
-      grid-column: 1;
-      font-size: 2rem;
-      color: var(--main-color);
-      margin-bottom: 1rem;
-    }
-  }
-}
-
 .devIndicator {
   position: fixed;
   font-size: 3rem;

frontend/src/styles/index.scss

@@ -1,4 +1,5 @@
 @import "buttons", "fonts", "404", "ads", "about", "account", "animations",
   "banners", "caret", "commandline", "core", "footer", "inputs", "keymap",
   "login", "monkey", "nav", "notifications", "popups", "profile", "scroll",
-  "settings", "account-settings", "leaderboards", "test", "media-queries";
+  "settings", "account-settings", "leaderboards", "test", "loading",
+  "media-queries";

frontend/src/styles/loading.scss

@@ -0,0 +1,38 @@
+.pageLoading {
+  .preloader {
+    text-align: center;
+    justify-self: center;
+    display: grid;
+    .barWrapper {
+      justify-content: center;
+      display: grid;
+      gap: 1rem;
+      grid-row: 1;
+      grid-column: 1;
+      .text {
+        height: 1.25em;
+      }
+      .bar {
+        width: 20rem;
+        height: 0.5rem;
+        background: var(--sub-alt-color);
+        border-radius: var(--roundness);
+        justify-self: center;
+        .fill {
+          height: 100%;
+          width: 0%;
+          background: var(--main-color);
+          border-radius: var(--roundness);
+          // transition: 1s;
+        }
+      }
+    }
+    .icon {
+      grid-row: 1;
+      grid-column: 1;
+      font-size: 2rem;
+      color: var(--main-color);
+      margin-bottom: 1rem;
+    }
+  }
+}

frontend/src/ts/commandline/lists/load-challenge.ts

@@ -25,7 +25,7 @@ function update(challenges: Challenge[]): void {
       id: "loadChallenge" + capitalizeFirstLetterOfEachWord(challenge.name),
       display: challenge.display,
       exec: async (): Promise<void> => {
-        navigate("/");
+        await navigate("/");
         await ChallengeController.setup(challenge.name);
         TestLogic.restart({
           nosave: true,

frontend/src/ts/commandline/lists/navigation.ts

@@ -10,7 +10,7 @@ const commands: Command[] = [
     alias: "navigate go to start begin type test",
     icon: "fa-keyboard",
     exec: (): void => {
-      navigate("/");
+      void navigate("/");
     },
   },
   {
@@ -19,7 +19,7 @@ const commands: Command[] = [
     alias: "navigate go to",
     icon: "fa-crown",
     exec: (): void => {
-      navigate("/leaderboards");
+      void navigate("/leaderboards");
     },
   },
   {
@@ -28,7 +28,7 @@ const commands: Command[] = [
     alias: "navigate go to",
     icon: "fa-info",
     exec: (): void => {
-      navigate("/about");
+      void navigate("/about");
     },
   },
   {
@@ -37,7 +37,7 @@ const commands: Command[] = [
     alias: "navigate go to",
     icon: "fa-cog",
     exec: (): void => {
-      navigate("/settings");
+      void navigate("/settings");
     },
   },
 
@@ -47,7 +47,7 @@ const commands: Command[] = [
     alias: "navigate go to stats",
     icon: "fa-user",
     exec: (): void => {
-      isAuthenticated() ? navigate("/account") : navigate("/login");
+      isAuthenticated() ? void navigate("/account") : void navigate("/login");
     },
   },
   {

frontend/src/ts/controllers/account-controller.ts

@@ -4,9 +4,6 @@ import Config, * as UpdateConfig from "../config";
 import * as Misc from "../utils/misc";
 import * as DB from "../db";
 import * as Loader from "../elements/loader";
-import * as PageTransition from "../states/page-transition";
-import * as ActivePage from "../states/active-page";
-import * as LoadingPage from "../pages/loading";
 import * as LoginPage from "../pages/login";
 import * as RegisterCaptchaModal from "../modals/register-captcha";
 import * as Account from "../pages/account";
@@ -65,13 +62,6 @@ async function sendVerificationEmail(): Promise<void> {
 async function getDataAndInit(): Promise<boolean> {
   try {
     console.log("getting account data");
-    if (window.location.pathname !== "/account") {
-      LoadingPage.updateBar(90);
-    } else {
-      LoadingPage.updateBar(45);
-    }
-    LoadingPage.updateText("Downloading user data...");
-    await LoadingPage.showBar();
     const snapshot = await DB.initSnapshot();
 
     if (snapshot === false) {
@@ -91,12 +81,6 @@ async function getDataAndInit(): Promise<boolean> {
         true
       );
     }
-    if (ActivePage.get() === "loading") {
-      LoadingPage.updateBar(100);
-    } else {
-      LoadingPage.updateBar(45);
-    }
-    LoadingPage.updateText("Applying settings...");
 
     const areConfigsEqual =
       JSON.stringify(Config) === JSON.stringify(snapshot.config);
@@ -114,14 +98,8 @@ async function getDataAndInit(): Promise<boolean> {
       }
     }
     if (window.location.pathname === "/account") {
-      LoadingPage.updateBar(90);
       await Account.downloadResults();
     }
-    if (window.location.pathname === "/login") {
-      navigate("/account");
-    } else {
-      navigate();
-    }
     return true;
   } catch (error) {
     console.error(error);
@@ -155,56 +133,76 @@ async function getDataAndInit(): Promise<boolean> {
 }
 
 export async function loadUser(_user: UserType): Promise<void> {
-  // User is signed in.
-  PageTransition.set(false);
   if (!(await getDataAndInit())) {
     signOut();
+    return;
   }
-
   AuthEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: true } });
-
-  // var displayName = user.displayName;
-  // var email = user.email;
-  // var emailVerified = user.emailVerified;
-  // var photoURL = user.photoURL;
-  // var isAnonymous = user.isAnonymous;
-  // var uid = user.uid;
-  // var providerData = user.providerData;
-  LoginPage.hidePreloader();
-
-  // showFavouriteThemesAtTheTop();
 }
 
 export async function onAuthStateChanged(
   authInitialisedAndConnected: boolean,
   user: UserType | null
 ): Promise<void> {
   console.debug(`account controller ready`);
+
+  let userPromise: Promise<void> = Promise.resolve();
+
   if (authInitialisedAndConnected) {
     console.debug(`auth state changed, user ${user ? "true" : "false"}`);
     console.debug(user);
     if (user) {
-      await loadUser(user);
+      userPromise = loadUser(user);
     } else {
-      if (window.location.pathname === "/account") {
-        window.history.replaceState("", "", "/login");
-      }
-
       DB.setSnapshot(undefined);
-      Sentry.clearUser();
-      PageTransition.set(false);
-      navigate();
-    }
-  } else {
-    console.debug(`auth not initialised or not connected`);
-    if (window.location.pathname === "/account") {
-      window.history.replaceState("", "", "/login");
     }
+  }
+
+  if (!authInitialisedAndConnected || !user) {
     Sentry.clearUser();
-    PageTransition.set(false);
-    navigate();
   }
 
+  let keyframes = [
+    {
+      percentage: 90,
+      durationMs: 1000,
+      text: "Downloading user data...",
+    },
+  ];
+
+  if (
+    window.location.pathname === "/account" ||
+    window.location.pathname === "/login"
+  ) {
+    keyframes = [
+      {
+        percentage: 40,
+        durationMs: 1000,
+        text: "Downloading user data...",
+      },
+      {
+        percentage: 90,
+        durationMs: 1000,
+        text: "Downloading results...",
+      },
+    ];
+  }
+
+  //undefined means navigate to whatever the current window.location.pathname is
+  await navigate(undefined, {
+    force: true,
+    overrideLoadingOptions: {
+      shouldLoad: () => {
+        return user !== null;
+      },
+      waitFor: async () => {
+        await userPromise;
+      },
+      style: "bar",
+      keyframes: keyframes,
+    },
+  });
+
   AuthEvent.dispatch({
     type: "authStateChanged",
     data: { isUserSignedIn: user !== null },