refactor: rework change page function

remove unnecessary wrapping promise
use promiseAnimation for easier understanding

Author: Miodec

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

@@ -39,6 +39,16 @@ function updateOpenGraphUrl(): void {
   }
 }
 
+function updateTitle(nextPage: { id: string; display?: string }): void {
+  if (nextPage.id === "test") {
+    Misc.updateTitle();
+  } else {
+    const titleString =
+      nextPage.display ?? Strings.capitalizeFirstLetterOfEachWord(nextPage.id);
+    Misc.updateTitle(`${titleString} | Monkeytype`);
+  }
+}
+
 export async function change(
   pageName: PageName,
   options = {} as ChangeOptions
@@ -49,77 +59,83 @@ export async function change(
 
   options = { ...defaultOptions, ...options };
 
-  return new Promise((resolve) => {
-    if (PageTransition.get()) {
-      console.debug(
-        `change page to ${pageName} stopped, page transition is true`
-      );
-      resolve(false);
-      return;
-    }
+  if (PageTransition.get()) {
+    console.debug(
+      `change page to ${pageName} stopped, page transition is true`
+    );
+    return false;
+  }
 
-    if (!options.force && ActivePage.get() === pageName) {
-      console.debug(`change page ${pageName} stoped, page already active`);
-      resolve(false);
-      return;
-    } else {
-      console.log(`changing page ${pageName}`);
-    }
+  if (!options.force && ActivePage.get() === pageName) {
+    console.debug(`change page ${pageName} stoped, page already active`);
+    return false;
+  } else {
+    console.log(`changing page ${pageName}`);
+  }
 
-    const pages = {
-      loading: PageLoading.page,
-      test: PageTest.page,
-      settings: Settings.page,
-      about: PageAbout.page,
-      account: Account.page,
-      login: PageLogin.page,
-      profile: PageProfile.page,
-      profileSearch: PageProfileSearch.page,
-      404: Page404.page,
-      accountSettings: PageAccountSettings.page,
-      leaderboards: PageLeaderboards.page,
-    };
+  const pages = {
+    loading: PageLoading.page,
+    test: PageTest.page,
+    settings: Settings.page,
+    about: PageAbout.page,
+    account: Account.page,
+    login: PageLogin.page,
+    profile: PageProfile.page,
+    profileSearch: PageProfileSearch.page,
+    404: Page404.page,
+    accountSettings: PageAccountSettings.page,
+    leaderboards: PageLeaderboards.page,
+  };
 
-    const previousPage = pages[ActivePage.get()];
-    const nextPage = pages[pageName];
+  const previousPage = pages[ActivePage.get()];
+  const nextPage = pages[pageName];
+  const totalDuration = Misc.applyReducedMotion(250);
+  const easingMethod: Misc.JQueryEasing = "swing";
 
-    void previousPage?.beforeHide().then(() => {
-      PageTransition.set(true);
-      $(".page").removeClass("active");
-      void Misc.swapElements(
-        previousPage.element,
-        nextPage.element,
-        250,
-        async () => {
-          PageTransition.set(false);
-          nextPage.element.addClass("active");
-          resolve(true);
-          await nextPage?.afterShow();
-          void AdController.reinstate();
-        },
-        async () => {
-          if (nextPage.id === "test") {
-            Misc.updateTitle();
-          } else {
-            const titleString =
-              nextPage.display ??
-              Strings.capitalizeFirstLetterOfEachWord(nextPage.id);
-            Misc.updateTitle(`${titleString} | Monkeytype`);
-          }
-          Focus.set(false);
-          ActivePage.set(nextPage.id);
+  //start
+  PageTransition.set(true);
+  $(".page").removeClass("active");
 
-          await previousPage?.afterHide();
+  //previous page
+  await previousPage?.beforeHide?.();
+  previousPage.element.removeClass("hidden").css("opacity", 1);
+  await Misc.promiseAnimation(
+    previousPage.element,
+    {
+      opacity: "0",
+    },
+    totalDuration / 2,
+    easingMethod
+  );
+  previousPage.element.addClass("hidden");
+  await previousPage?.afterHide();
 
-          await nextPage?.beforeShow({
-            params: options.params,
-            // @ts-expect-error for the future (i think)
-            data: options.data,
-          });
+  //between
+  updateTitle(nextPage);
+  Focus.set(false);
+  ActivePage.set(nextPage.id);
+  updateOpenGraphUrl();
 
-          updateOpenGraphUrl();
-        }
-      );
-    });
+  //next page
+  await nextPage?.beforeShow({
+    params: options.params,
+    // @ts-expect-error for the future (i think)
+    data: options.data,
   });
+  nextPage.element.removeClass("hidden").css("opacity", 0);
+  await Misc.promiseAnimation(
+    nextPage.element,
+    {
+      opacity: "1",
+    },
+    totalDuration / 2,
+    easingMethod
+  );
+  nextPage.element.addClass("active");
+  await nextPage?.afterShow();
+
+  //wrapup
+  PageTransition.set(false);
+  void AdController.reinstate();
+  return true;
 }