From 765ca9569feee597d0d42c7ef809349e460fdaad Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 22 Dec 2025 22:44:52 +0100
Subject: [PATCH 1/2] refactor: use loadingOptions for leaderboards page

---
 frontend/src/ts/controllers/page-controller.ts | 4 ++--
 frontend/src/ts/pages/leaderboards.ts          | 8 +++++++-
 frontend/src/ts/pages/page.ts                  | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index e60461598866..b191c40e5c99 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -275,9 +275,9 @@ export async function change(
     typeof nextPageLoadingMode === "object" &&
     nextPageLoadingMode.mode === "async"
   ) {
-    nextPageLoadingMode.beforeLoading();
+    nextPageLoadingMode.beforeLoading?.();
     void nextPage?.loadingOptions?.loadingPromise().then(() => {
-      nextPageLoadingMode.afterLoading();
+      nextPageLoadingMode.afterLoading?.();
     });
   }
 
diff --git a/frontend/src/ts/pages/leaderboards.ts b/frontend/src/ts/pages/leaderboards.ts
index bb07897e9d89..d9c78c1b0414 100644
--- a/frontend/src/ts/pages/leaderboards.ts
+++ b/frontend/src/ts/pages/leaderboards.ts
@@ -1485,13 +1485,19 @@ export const page = new PageWithUrlParams({
   element: qsr(".page.pageLeaderboards"),
   path: "/leaderboards",
   urlParamsSchema: UrlParameterSchema,
+  loadingOptions: {
+    style: "spinner",
+    loadingMode: () => "sync",
+    loadingPromise: async () => {
+      await ServerConfiguration.configurationPromise;
+    },
+  },
 
   afterHide: async (): Promise<void> => {
     Skeleton.remove("pageLeaderboards");
     stopTimer();
   },
   beforeShow: async (options): Promise<void> => {
-    await ServerConfiguration.configurationPromise;
     Skeleton.append("pageLeaderboards", "main");
     await updateValidDailyLeaderboards();
     await appendModeAndLanguageButtons();
diff --git a/frontend/src/ts/pages/page.ts b/frontend/src/ts/pages/page.ts
index 70375c86fcb5..aa23f89e43b6 100644
--- a/frontend/src/ts/pages/page.ts
+++ b/frontend/src/ts/pages/page.ts
@@ -34,7 +34,7 @@ export type LoadingOptions = {
   loadingMode: () =>
     | "none"
     | "sync"
-    | { mode: "async"; beforeLoading: () => void; afterLoading: () => void };
+    | { mode: "async"; beforeLoading?: () => void; afterLoading?: () => void };
   /**
    * When this promise resolves, the loading screen will be hidden.
    */

From d6233f3405ad43952827df65092949c2bd6bf23a Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Fri, 26 Dec 2025 21:26:43 +0100
Subject: [PATCH 2/2] refactor: move result html into its own file

---
 frontend/src/html/pages/test-result.html | 317 ++++++++++++++++++++++
 frontend/src/html/pages/test.html        | 318 +----------------------
 2 files changed, 318 insertions(+), 317 deletions(-)
 create mode 100644 frontend/src/html/pages/test-result.html

diff --git a/frontend/src/html/pages/test-result.html b/frontend/src/html/pages/test-result.html
new file mode 100644
index 000000000000..14f4bbd3e81d
--- /dev/null
+++ b/frontend/src/html/pages/test-result.html
@@ -0,0 +1,317 @@
+<div id="result" class="content-grid full-width hidden" tabindex="-1">
+  <div class="wrapper">
+    <div class="stats">
+      <!-- <div class="info">words 10<br>punctuation</div> -->
+
+      <div class="group wpm">
+        <div class="top">
+          <div class="text">wpm</div>
+          <div
+            class="crown hidden"
+            aria-label=""
+            data-balloon-pos="up"
+            data-balloon-length="medium"
+          >
+            <i class="fas fa-question"></i>
+            <i class="fas fa-crown"></i>
+            <i class="fas fa-slash"></i>
+            <i class="fas fa-exclamation-triangle"></i>
+          </div>
+        </div>
+        <div class="bottom" aria-label="" data-balloon-pos="up">-</div>
+      </div>
+      <div class="group acc">
+        <div class="top">acc</div>
+        <div class="bottom" aria-label="" data-balloon-pos="up">-</div>
+      </div>
+    </div>
+    <div class="stats morestats">
+      <div class="group testType">
+        <div class="top">test type</div>
+        <div class="bottom">-</div>
+        <div class="tags hidden" style="margin-top: 0.5rem">
+          <div class="top">
+            <span>tags</span>
+            <div
+              class="textButton editTagsButton"
+              result-id=""
+              active-tag-ids=""
+              aria-label="Edit tags"
+              role="button"
+              data-balloon-pos="right"
+            >
+              <i class="fas fa-pen fa-fw"></i>
+            </div>
+          </div>
+          <div class="bottom">-</div>
+        </div>
+      </div>
+      <!-- <div class="group infoAndTags"> -->
+      <div class="group info">
+        <div class="top">other</div>
+        <div class="bottom">-</div>
+      </div>
+
+      <!-- </div> -->
+      <!-- <div class="subgroup"> -->
+      <div class="group raw">
+        <div class="top">raw</div>
+        <div class="bottom" aria-label="" data-balloon-pos="up">-</div>
+      </div>
+      <div class="group key">
+        <div class="top">characters</div>
+        <div
+          class="bottom"
+          aria-label="correct&NewLine;incorrect&NewLine;extra&NewLine;missed"
+          data-balloon-break=""
+          data-balloon-pos="up"
+        >
+          -
+        </div>
+      </div>
+
+      <!-- </div> -->
+
+      <!-- <div class="subgroup"> -->
+      <div class="group flat consistency">
+        <div class="top">consistency</div>
+        <div class="bottom" aria-label="" data-balloon-pos="up">2 -</div>
+      </div>
+      <div class="group time">
+        <div class="top">time</div>
+        <div class="bottom" aria-label="" data-balloon-pos="up">
+          <div class="text">-</div>
+          <div class="afk"></div>
+          <div class="timeToday"></div>
+        </div>
+      </div>
+      <!-- </div> -->
+
+      <div class="group dailyLeaderboard hidden">
+        <div class="top">daily leaderboard</div>
+        <div
+          id="dailyLeaderboardRank"
+          aria-label="Show daily leaderboard"
+          data-balloon-pos="up"
+          class="bottom"
+        >
+          -
+        </div>
+      </div>
+
+      <div class="group source hidden">
+        <div class="top">
+          <span style="margin-right: 0.5em">source</span>
+          <span
+            id="reportQuoteButton"
+            class="textButton hidden"
+            aria-label="Report quote"
+            data-balloon-pos="up"
+            style="display: inline-block"
+          >
+            <i class="icon fas fa-fw fa-flag"></i>
+          </span>
+          <span
+            id="favoriteQuoteButton"
+            class="textButton hidden"
+            aria-label="Favorite quote"
+            data-balloon-pos="up"
+            style="display: inline-block"
+          >
+            <i class="icon far fa-fw fa-heart"></i>
+          </span>
+          <span
+            id="rateQuoteButton"
+            class="textButton hidden"
+            aria-label="Rate quote"
+            data-balloon-pos="up"
+          >
+            <i class="icon far fa-fw fa-star"></i>
+            <span class="rating"></span>
+          </span>
+        </div>
+        <div class="bottom">-</div>
+      </div>
+    </div>
+    <div class="chart">
+      <div class="chartLegend">
+        <button class="text" tabindex="-1" data-id="pbLine">
+          <i class="fas fa-crown"></i>
+          <div class="text">pb</div>
+        </button>
+        <button class="text" tabindex="-1" data-id="tagPbLine">
+          <i class="fas fa-tag"></i>
+          <div class="text">tag pb</div>
+        </button>
+        <button class="text" tabindex="-1" data-id="raw">
+          <div class="line dashed"></div>
+          <div class="text">raw</div>
+        </button>
+        <button class="text" tabindex="-1" data-id="burst">
+          <div class="line"></div>
+          <div class="text">burst</div>
+        </button>
+        <button class="text" tabindex="-1" data-id="errors">
+          <!-- <div class="line"></div> -->
+          <i class="fas fa-times"></i>
+          <div class="text">errors</div>
+        </button>
+      </div>
+      <!-- <div class="title">wpm over time</div> -->
+      <canvas id="wpmChart"></canvas>
+    </div>
+    <div class="bottom">
+      <div id="resultWordsHistory" class="hidden">
+        <div class="title">
+          <span>input history</span>
+          <button
+            id="copyWordsListButton"
+            class="textButton"
+            aria-label="Copy words list"
+            data-balloon-pos="up"
+            style="display: inline-block"
+            tabindex="-1"
+          >
+            <i class="fas fa-fw fa-align-left"></i>
+          </button>
+          <button
+            id="copyMissedWordsListButton"
+            class="textButton"
+            aria-label="Copy missed words list"
+            data-balloon-pos="up"
+            tabindex="-1"
+          >
+            <i class="fas fa-fw fa-times"></i>
+          </button>
+          <button
+            id="toggleBurstHeatmap"
+            class="textButton"
+            aria-label="Toggle burst heatmap"
+            data-balloon-pos="up"
+            style="display: inline-block"
+            tabindex="-1"
+          >
+            <i class="fas fa-fw fa-fire-alt"></i>
+          </button>
+          <div class="heatmapLegend hidden">
+            <div class="boxes">
+              <div class="box box0"></div>
+              <div class="box box1"></div>
+              <div class="box box2"></div>
+              <div class="box box3"></div>
+              <div class="box box4"></div>
+            </div>
+          </div>
+        </div>
+        <div class="words"></div>
+      </div>
+      <div id="resultReplay" class="hidden">
+        <div class="title">
+          watch replay
+          <button
+            id="playpauseReplayButton"
+            class="textButton"
+            aria-label="Start replay"
+            data-balloon-pos="up"
+            style="display: inline-block"
+            tabindex="-1"
+          >
+            <i class="fas fa-play"></i>
+          </button>
+          <p id="replayStats">0s</p>
+        </div>
+        <div id="replayWordsWrapper">
+          <div id="replayWords" class="words"></div>
+        </div>
+      </div>
+      <button id="retrySavingResultButton" class="danger hidden">
+        <i class="fas fa-redo"></i>
+        Retry saving result
+      </button>
+      <div class="buttons">
+        <button
+          class="text"
+          id="nextTestButton"
+          aria-label="Next test"
+          role="button"
+          data-balloon-pos="down"
+        >
+          <i class="fas fa-fw fa-chevron-right"></i>
+        </button>
+        <button
+          class="text"
+          id="restartTestButtonWithSameWordset"
+          aria-label="Repeat test"
+          role="button"
+          data-balloon-pos="down"
+        >
+          <i class="fas fa-fw fa-sync-alt"></i>
+        </button>
+        <button
+          class="text"
+          id="practiseWordsButton"
+          aria-label="Practice words"
+          role="button"
+          data-balloon-pos="down"
+        >
+          <i class="fas fa-fw fa-exclamation-triangle"></i>
+        </button>
+        <button
+          class="text"
+          id="showWordHistoryButton"
+          aria-label="Toggle words history"
+          role="button"
+          data-balloon-pos="down"
+        >
+          <i class="fas fa-fw fa-align-left"></i>
+        </button>
+        <button
+          class="text"
+          id="watchReplayButton"
+          aria-label="Watch replay"
+          role="button"
+          data-balloon-pos="down"
+        >
+          <i class="fas fa-fw fa-backward"></i>
+        </button>
+        <button
+          class="text"
+          id="saveScreenshotButton"
+          aria-label="Copy screenshot to clipboard&#10;(shift click to download)"
+          role="button"
+          data-balloon-pos="down"
+          data-balloon-break
+        >
+          <i class="far fa-fw fa-image"></i>
+        </button>
+        <!-- <button
+          class="text"
+          id="watchVideoAdButton"
+          aria-label="Watch video ad"
+          role="button"
+          data-balloon-pos="down"
+        >
+          <i class="fas fa-fw fa-ad"></i>
+        </button> -->
+      </div>
+    </div>
+    <div class="loginTip">
+      <a href="/login" router-link>Sign in</a>
+      to save your result
+    </div>
+    <div class="ssWatermark hidden">monkeytype.com</div>
+  </div>
+  <div class="full-width" style="margin-top: 1rem">
+    <div id="ad-result-wrapper" class="ad full-width advertisement ad-h">
+      <div class="iconAndText">
+        <div class="icon"><i class="fas fa-ad"></i></div>
+        <div class="text textRight"></div>
+      </div>
+      <div id="ad-result"></div>
+    </div>
+    <div id="ad-result-small-wrapper" class="ad advertisement ad-h-s">
+      <div class="icon small"><i class="fas fa-ad"></i></div>
+      <div id="ad-result-small"></div>
+    </div>
+  </div>
+</div>
diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index f2d8f33c8140..a2cf8e5a2538 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -195,321 +195,5 @@
   <div class="loading hidden">
     <i class="fas fa-circle-notch fa-spin"></i>
   </div>
-  <div id="result" class="content-grid full-width hidden" tabindex="-1">
-    <div class="wrapper">
-      <div class="stats">
-        <!-- <div class="info">words 10<br>punctuation</div> -->
-
-        <div class="group wpm">
-          <div class="top">
-            <div class="text">wpm</div>
-            <div
-              class="crown hidden"
-              aria-label=""
-              data-balloon-pos="up"
-              data-balloon-length="medium"
-            >
-              <i class="fas fa-question"></i>
-              <i class="fas fa-crown"></i>
-              <i class="fas fa-slash"></i>
-              <i class="fas fa-exclamation-triangle"></i>
-            </div>
-          </div>
-          <div class="bottom" aria-label="" data-balloon-pos="up">-</div>
-        </div>
-        <div class="group acc">
-          <div class="top">acc</div>
-          <div class="bottom" aria-label="" data-balloon-pos="up">-</div>
-        </div>
-      </div>
-      <div class="stats morestats">
-        <div class="group testType">
-          <div class="top">test type</div>
-          <div class="bottom">-</div>
-          <div class="tags hidden" style="margin-top: 0.5rem">
-            <div class="top">
-              <span>tags</span>
-              <div
-                class="textButton editTagsButton"
-                result-id=""
-                active-tag-ids=""
-                aria-label="Edit tags"
-                role="button"
-                data-balloon-pos="right"
-              >
-                <i class="fas fa-pen fa-fw"></i>
-              </div>
-            </div>
-            <div class="bottom">-</div>
-          </div>
-        </div>
-        <!-- <div class="group infoAndTags"> -->
-        <div class="group info">
-          <div class="top">other</div>
-          <div class="bottom">-</div>
-        </div>
-
-        <!-- </div> -->
-        <!-- <div class="subgroup"> -->
-        <div class="group raw">
-          <div class="top">raw</div>
-          <div class="bottom" aria-label="" data-balloon-pos="up">-</div>
-        </div>
-        <div class="group key">
-          <div class="top">characters</div>
-          <div
-            class="bottom"
-            aria-label="correct&NewLine;incorrect&NewLine;extra&NewLine;missed"
-            data-balloon-break=""
-            data-balloon-pos="up"
-          >
-            -
-          </div>
-        </div>
-
-        <!-- </div> -->
-
-        <!-- <div class="subgroup"> -->
-        <div class="group flat consistency">
-          <div class="top">consistency</div>
-          <div class="bottom" aria-label="" data-balloon-pos="up">2 -</div>
-        </div>
-        <div class="group time">
-          <div class="top">time</div>
-          <div class="bottom" aria-label="" data-balloon-pos="up">
-            <div class="text">-</div>
-            <div class="afk"></div>
-            <div class="timeToday"></div>
-          </div>
-        </div>
-        <!-- </div> -->
-
-        <div class="group dailyLeaderboard hidden">
-          <div class="top">daily leaderboard</div>
-          <div
-            id="dailyLeaderboardRank"
-            aria-label="Show daily leaderboard"
-            data-balloon-pos="up"
-            class="bottom"
-          >
-            -
-          </div>
-        </div>
-
-        <div class="group source hidden">
-          <div class="top">
-            <span style="margin-right: 0.5em">source</span>
-            <span
-              id="reportQuoteButton"
-              class="textButton hidden"
-              aria-label="Report quote"
-              data-balloon-pos="up"
-              style="display: inline-block"
-            >
-              <i class="icon fas fa-fw fa-flag"></i>
-            </span>
-            <span
-              id="favoriteQuoteButton"
-              class="textButton hidden"
-              aria-label="Favorite quote"
-              data-balloon-pos="up"
-              style="display: inline-block"
-            >
-              <i class="icon far fa-fw fa-heart"></i>
-            </span>
-            <span
-              id="rateQuoteButton"
-              class="textButton hidden"
-              aria-label="Rate quote"
-              data-balloon-pos="up"
-            >
-              <i class="icon far fa-fw fa-star"></i>
-              <span class="rating"></span>
-            </span>
-          </div>
-          <div class="bottom">-</div>
-        </div>
-      </div>
-      <div class="chart">
-        <div class="chartLegend">
-          <button class="text" tabindex="-1" data-id="pbLine">
-            <i class="fas fa-crown"></i>
-            <div class="text">pb</div>
-          </button>
-          <button class="text" tabindex="-1" data-id="tagPbLine">
-            <i class="fas fa-tag"></i>
-            <div class="text">tag pb</div>
-          </button>
-          <button class="text" tabindex="-1" data-id="raw">
-            <div class="line dashed"></div>
-            <div class="text">raw</div>
-          </button>
-          <button class="text" tabindex="-1" data-id="burst">
-            <div class="line"></div>
-            <div class="text">burst</div>
-          </button>
-          <button class="text" tabindex="-1" data-id="errors">
-            <!-- <div class="line"></div> -->
-            <i class="fas fa-times"></i>
-            <div class="text">errors</div>
-          </button>
-        </div>
-        <!-- <div class="title">wpm over time</div> -->
-        <canvas id="wpmChart"></canvas>
-      </div>
-      <div class="bottom">
-        <div id="resultWordsHistory" class="hidden">
-          <div class="title">
-            <span>input history</span>
-            <button
-              id="copyWordsListButton"
-              class="textButton"
-              aria-label="Copy words list"
-              data-balloon-pos="up"
-              style="display: inline-block"
-              tabindex="-1"
-            >
-              <i class="fas fa-fw fa-align-left"></i>
-            </button>
-            <button
-              id="copyMissedWordsListButton"
-              class="textButton"
-              aria-label="Copy missed words list"
-              data-balloon-pos="up"
-              tabindex="-1"
-            >
-              <i class="fas fa-fw fa-times"></i>
-            </button>
-            <button
-              id="toggleBurstHeatmap"
-              class="textButton"
-              aria-label="Toggle burst heatmap"
-              data-balloon-pos="up"
-              style="display: inline-block"
-              tabindex="-1"
-            >
-              <i class="fas fa-fw fa-fire-alt"></i>
-            </button>
-            <div class="heatmapLegend hidden">
-              <div class="boxes">
-                <div class="box box0"></div>
-                <div class="box box1"></div>
-                <div class="box box2"></div>
-                <div class="box box3"></div>
-                <div class="box box4"></div>
-              </div>
-            </div>
-          </div>
-          <div class="words"></div>
-        </div>
-        <div id="resultReplay" class="hidden">
-          <div class="title">
-            watch replay
-            <button
-              id="playpauseReplayButton"
-              class="textButton"
-              aria-label="Start replay"
-              data-balloon-pos="up"
-              style="display: inline-block"
-              tabindex="-1"
-            >
-              <i class="fas fa-play"></i>
-            </button>
-            <p id="replayStats">0s</p>
-          </div>
-          <div id="replayWordsWrapper">
-            <div id="replayWords" class="words"></div>
-          </div>
-        </div>
-        <button id="retrySavingResultButton" class="danger hidden">
-          <i class="fas fa-redo"></i>
-          Retry saving result
-        </button>
-        <div class="buttons">
-          <button
-            class="text"
-            id="nextTestButton"
-            aria-label="Next test"
-            role="button"
-            data-balloon-pos="down"
-          >
-            <i class="fas fa-fw fa-chevron-right"></i>
-          </button>
-          <button
-            class="text"
-            id="restartTestButtonWithSameWordset"
-            aria-label="Repeat test"
-            role="button"
-            data-balloon-pos="down"
-          >
-            <i class="fas fa-fw fa-sync-alt"></i>
-          </button>
-          <button
-            class="text"
-            id="practiseWordsButton"
-            aria-label="Practice words"
-            role="button"
-            data-balloon-pos="down"
-          >
-            <i class="fas fa-fw fa-exclamation-triangle"></i>
-          </button>
-          <button
-            class="text"
-            id="showWordHistoryButton"
-            aria-label="Toggle words history"
-            role="button"
-            data-balloon-pos="down"
-          >
-            <i class="fas fa-fw fa-align-left"></i>
-          </button>
-          <button
-            class="text"
-            id="watchReplayButton"
-            aria-label="Watch replay"
-            role="button"
-            data-balloon-pos="down"
-          >
-            <i class="fas fa-fw fa-backward"></i>
-          </button>
-          <button
-            class="text"
-            id="saveScreenshotButton"
-            aria-label="Copy screenshot to clipboard&#10;(shift click to download)"
-            role="button"
-            data-balloon-pos="down"
-            data-balloon-break
-          >
-            <i class="far fa-fw fa-image"></i>
-          </button>
-          <!-- <button
-          class="text"
-          id="watchVideoAdButton"
-          aria-label="Watch video ad"
-          role="button"
-          data-balloon-pos="down"
-        >
-          <i class="fas fa-fw fa-ad"></i>
-        </button> -->
-        </div>
-      </div>
-      <div class="loginTip">
-        <a href="/login" router-link>Sign in</a>
-        to save your result
-      </div>
-      <div class="ssWatermark hidden">monkeytype.com</div>
-    </div>
-    <div class="full-width" style="margin-top: 1rem">
-      <div id="ad-result-wrapper" class="ad full-width advertisement ad-h">
-        <div class="iconAndText">
-          <div class="icon"><i class="fas fa-ad"></i></div>
-          <div class="text textRight"></div>
-        </div>
-        <div id="ad-result"></div>
-      </div>
-      <div id="ad-result-small-wrapper" class="ad advertisement ad-h-s">
-        <div class="icon small"><i class="fas fa-ad"></i></div>
-        <div id="ad-result-small"></div>
-      </div>
-    </div>
-  </div>
+  <load src="./test-result.html" />
 </div>