Uncodedtech · pull · Jan 18, 2026 · Jan 17, 2026 · Jan 17, 2026 · Jan 17, 2026
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -3,11 +3,11 @@
   <load src="html/head.html" />
 
   <body>
+    <LoaderBar />
     <div id="mediaQueryDebug"></div>
     <load src="html/warnings.html" />
     <div id="fpsCounter" class="hidden"></div>
     <div class="customBackground"></div>
-    <div id="backgroundLoader" class="hidden"></div>
     <div id="bannerCenter" class="focus"></div>
     <div id="notificationCenter">
       <div class="clearAll button hidden">

diff --git a/frontend/src/styles/core.scss b/frontend/src/styles/core.scss
@@ -186,7 +186,8 @@ body {
 }
 
 #backgroundLoader {
-  height: 3px;
+  top: 0;
+  height: 0.25rem;
   position: fixed;
   width: 100%;
   background: var(--main-color);

diff --git a/frontend/src/ts/auth.ts b/frontend/src/ts/auth.ts
@@ -3,7 +3,7 @@ import * as Notifications from "./elements/notifications";
 import Config, { applyConfig, saveFullConfigToLocalStorage } from "./config";
 import * as Misc from "./utils/misc";
 import * as DB from "./db";
-import * as Loader from "./elements/loader";
+import { showLoaderBar, hideLoaderBar } from "./signals/loader-bar";
 import * as LoginPage from "./pages/login";
 import * as RegisterCaptchaModal from "./modals/register-captcha";
 import {
@@ -43,15 +43,15 @@ async function sendVerificationEmail(): Promise<void> {
     return;
   }
 
-  Loader.show();
+  showLoaderBar();
   qs(".sendVerificationEmail")?.disable();
   const response = await Ape.users.verificationEmail();
   qs(".sendVerificationEmail")?.enable();
   if (response.status !== 200) {
-    Loader.hide();
+    hideLoaderBar();
     Notifications.add("Failed to request verification email", -1, { response });
   } else {
-    Loader.hide();
+    hideLoaderBar();
     Notifications.add("Verification email sent", 1);
   }
 }
@@ -296,16 +296,16 @@ async function addAuthProvider(
     });
     return;
   }
-  Loader.show();
+  showLoaderBar();
   const user = getAuthenticatedUser();
   if (!user) return;
   try {
     await linkWithPopup(user, provider);
-    Loader.hide();
+    hideLoaderBar();
     Notifications.add(`${providerName} authentication added`, 1);
     AuthEvent.dispatch({ type: "authConfigUpdated" });
   } catch (error) {
-    Loader.hide();
+    hideLoaderBar();
     const message = Misc.createErrorMessage(
       error,
       `Failed to add ${providerName} authentication`,

diff --git a/frontend/src/ts/commandline/commandline.ts b/frontend/src/ts/commandline/commandline.ts
@@ -12,7 +12,7 @@ import {
   getCommandlineSubgroup,
   setCommandlineSubgroup,
 } from "../signals/core";
-import * as Loader from "../elements/loader";
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import { Command, CommandsSubgroup, CommandWithValidation } from "./types";
 import { areSortedArraysEqual, areUnsortedArraysEqual } from "../utils/arrays";
 import { parseIntOptional } from "../utils/numbers";
@@ -123,11 +123,11 @@ export function show(
         if (typeof overrideStringOrGroup === "string") {
           const exists = CommandlineLists.doesListExist(overrideStringOrGroup);
           if (exists) {
-            Loader.show();
+            showLoaderBar();
             subgroupOverride = await CommandlineLists.getList(
               overrideStringOrGroup,
             );
-            Loader.hide();
+            hideLoaderBar();
           } else {
             subgroupOverride = null;
             usingSingleList = Config.singleListCommandLine === "on";

diff --git a/frontend/src/ts/commandline/lists/quote-favorites.ts b/frontend/src/ts/commandline/lists/quote-favorites.ts
@@ -3,7 +3,7 @@ import QuotesController, { Quote } from "../../controllers/quotes-controller";
 import * as Notifications from "../../elements/notifications";
 import { isAuthenticated } from "../../firebase";
 import { createErrorMessage } from "../../utils/misc";
-import * as Loader from "../../elements/loader";
+import { showLoaderBar, hideLoaderBar } from "../../signals/loader-bar";
 import * as TestWords from "../../test/test-words";
 import { Command } from "../types";
 
@@ -23,15 +23,15 @@ const commands: Command[] = [
     },
     exec: async (): Promise<void> => {
       try {
-        Loader.show();
+        showLoaderBar();
         await QuotesController.setQuoteFavorite(
           TestWords.currentQuote as Quote,
           true,
         );
-        Loader.hide();
+        hideLoaderBar();
         Notifications.add("Quote added to favorites", 1);
       } catch (e) {
-        Loader.hide();
+        hideLoaderBar();
         const message = createErrorMessage(
           e,
           "Failed to add quote to favorites",
@@ -55,15 +55,15 @@ const commands: Command[] = [
     },
     exec: async (): Promise<void> => {
       try {
-        Loader.show();
+        showLoaderBar();
         await QuotesController.setQuoteFavorite(
           TestWords.currentQuote as Quote,
           false,
         );
-        Loader.hide();
+        hideLoaderBar();
         Notifications.add("Quote removed from favorites", 1);
       } catch (e) {
-        Loader.hide();
+        hideLoaderBar();
         const message = createErrorMessage(
           e,
           "Failed to remove quote from favorites",

diff --git a/frontend/src/ts/components/common/LoaderBar.tsx b/frontend/src/ts/components/common/LoaderBar.tsx
@@ -0,0 +1,19 @@
+import { JSX } from "solid-js";
+import { useRefWithUtils } from "../../hooks/useRefWithUtils";
+import { getLoaderBarSignal } from "../../signals/loader-bar";
+import { useVisibilityAnimation } from "../../hooks/useVisibilityAnimation";
+import { applyReducedMotion } from "../../utils/misc";
+
+export function LoaderBar(): JSX.Element {
+  const [ref, loaderEl] = useRefWithUtils<HTMLDivElement>();
+
+  useVisibilityAnimation({
+    element: loaderEl,
+    isVisible: () => getLoaderBarSignal()?.visible === true,
+    showAnimationOptions: {
+      delay: applyReducedMotion(getLoaderBarSignal()?.instant ? 0 : 125),
+    },
+  });
+
+  return <div id="backgroundLoader" class="hidden" ref={ref}></div>;
+}
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
@@ -1,15 +1,16 @@
 import { render } from "solid-js/web";
 import { qsa } from "../utils/dom";
-
 import { JSXElement } from "solid-js";
 import { Footer } from "./layout/footer/Footer";
 import { Modals } from "./modals/Modals";
 import { AboutPage } from "./pages/AboutPage";
+import { LoaderBar } from "./common/LoaderBar";
 
 const components: Record<string, () => JSXElement> = {
   Footer: () => <Footer />,
   Modals: () => <Modals />,
   AboutPage: () => <AboutPage />,
+  LoaderBar: () => <LoaderBar />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {

diff --git a/frontend/src/ts/controllers/challenge-controller.ts b/frontend/src/ts/controllers/challenge-controller.ts
@@ -7,7 +7,8 @@ import * as Funbox from "../test/funbox/funbox";
 import Config, { setConfig } from "../config";
 import * as ConfigEvent from "../observables/config-event";
 import * as TestState from "../test/test-state";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import { CustomTextLimitMode, CustomTextMode } from "@monkeytype/schemas/util";
 import {
   Config as ConfigType,
@@ -284,11 +285,11 @@ export async function setup(challengeName: string): Promise<boolean> {
         nosave: true,
       });
     } else if (challenge.type === "script") {
-      Loader.show();
+      showLoaderBar();
       const response = await fetch(
         "/challenges/" + (challenge.parameters[0] as string),
       );
-      Loader.hide();
+      hideLoaderBar();
       if (response.status !== 200) {
         throw new Error(`${response.status} ${response.statusText}`);
       }

diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
@@ -8,7 +8,8 @@ import * as BackgroundFilter from "../elements/custom-background-filter";
 import * as ConfigEvent from "../observables/config-event";
 import * as DB from "../db";
 import * as Notifications from "../elements/notifications";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import { debounce } from "throttle-debounce";
 import { ThemeName } from "@monkeytype/schemas/configs";
 import { themes, ThemesList } from "../constants/themes";
@@ -93,7 +94,7 @@ export async function loadStyle(name: string): Promise<void> {
     console.debug("Theme controller loading style", name);
     loadStyleLoaderTimeouts.push(
       setTimeout(() => {
-        Loader.show();
+        showLoaderBar();
       }, 100),
     );
     qs("#nextTheme")?.remove();
@@ -104,7 +105,7 @@ export async function loadStyle(name: string): Promise<void> {
     link.id = "nextTheme";
     link.onload = (): void => {
       console.debug("Theme controller loaded style", name);
-      Loader.hide();
+      hideLoaderBar();
       swapCurrentToNext();
       loadStyleLoaderTimeouts.map((t) => clearTimeout(t));
       loadStyleLoaderTimeouts = [];
@@ -114,7 +115,7 @@ export async function loadStyle(name: string): Promise<void> {
     link.onerror = (e): void => {
       console.debug("Theme controller failed to load style", name, e);
       console.error(`Failed to load theme ${name}`, e);
-      Loader.hide();
+      hideLoaderBar();
       Notifications.add("Failed to load theme", 0);
       swapCurrentToNext();
       loadStyleLoaderTimeouts.map((t) => clearTimeout(t));

diff --git a/frontend/src/ts/db.ts b/frontend/src/ts/db.ts
@@ -9,8 +9,7 @@ import {
   TestActivityCalendar,
   ModifiableTestActivityCalendar,
 } from "./elements/test-activity-calendar";
-import * as Loader from "./elements/loader";
-
+import { showLoaderBar, hideLoaderBar } from "./signals/loader-bar";
 import { Badge, CustomTheme } from "@monkeytype/schemas/users";
 import { Config, Difficulty } from "@monkeytype/schemas/configs";
 import {
@@ -1110,11 +1109,11 @@ export async function getTestActivityCalendar(
       return undefined;
     }
 
-    Loader.show();
+    showLoaderBar();
     const response = await Ape.users.getTestActivity();
     if (response.status !== 200) {
       Notifications.add("Error getting test activities", -1, { response });
-      Loader.hide();
+      hideLoaderBar();
       return undefined;
     }
 
@@ -1134,7 +1133,7 @@ export async function getTestActivityCalendar(
         true,
       );
     }
-    Loader.hide();
+    hideLoaderBar();
   }
 
   return dbSnapshot.testActivityByYear[yearString];

diff --git a/frontend/src/ts/elements/account-settings/ape-key-table.ts b/frontend/src/ts/elements/account-settings/ape-key-table.ts
@@ -1,4 +1,4 @@
-import * as Loader from "../../elements/loader";
+import { showLoaderBar, hideLoaderBar } from "../../signals/loader-bar";
 import * as Notifications from "../../elements/notifications";
 import Ape from "../../ape";
 import { ApeKey, ApeKeys } from "@monkeytype/schemas/ape-keys";
@@ -257,12 +257,12 @@ function refreshList(): void {
 async function toggleActiveKey(keyId: string): Promise<void> {
   const key = apeKeys?.[keyId];
   if (!key || apeKeys === undefined) return;
-  Loader.show();
+  showLoaderBar();
   const response = await Ape.apeKeys.save({
     params: { apeKeyId: keyId },
     body: { enabled: !key.enabled },
   });
-  Loader.hide();
+  hideLoaderBar();
   if (response.status !== 200) {
     Notifications.add("Failed to update key", -1, { response });
     return;

diff --git a/frontend/src/ts/elements/account/result-filters.ts b/frontend/src/ts/elements/account/result-filters.ts
@@ -4,7 +4,7 @@ import * as DB from "../../db";
 import Config from "../../config";
 import * as Notifications from "../notifications";
 import Ape from "../../ape/index";
-import * as Loader from "../loader";
+import { showLoaderBar, hideLoaderBar } from "../../signals/loader-bar";
 import SlimSelect from "slim-select";
 import { QuoteLength } from "@monkeytype/schemas/configs";
 import {
@@ -183,11 +183,11 @@ export async function createFilterPreset(
   name: string,
 ): Promise<number | undefined> {
   name = name.replace(/ /g, "_");
-  Loader.show();
+  showLoaderBar();
   const result = await Ape.users.addResultFilterPreset({
     body: { ...filters, name },
   });
-  Loader.hide();
+  hideLoaderBar();
   if (result.status === 200) {
     addFilterPresetToSnapshot({ ...filters, name, _id: result.body.data });
     void updateFilterPresets();
@@ -212,11 +212,11 @@ function removeFilterPresetFromSnapshot(id: string): void {
 
 // deletes the currently selected filter preset
 async function deleteFilterPreset(id: string): Promise<void> {
-  Loader.show();
+  showLoaderBar();
   const result = await Ape.users.removeResultFilterPreset({
     params: { presetId: id },
   });
-  Loader.hide();
+  hideLoaderBar();
   if (result.status === 200) {
     removeFilterPresetFromSnapshot(id);
     void updateFilterPresets();

diff --git a/frontend/src/ts/elements/loader.ts b/frontend/src/ts/elements/loader.ts
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -5,7 +5,7 @@ import * as Colors from "../../utils/colors";
 import * as Notifications from "../notifications";
 import * as ThemeColors from "../theme-colors";
 import * as ChartController from "../../controllers/chart-controller";
-import * as Loader from "../loader";
+import { showLoaderBar, hideLoaderBar } from "../../signals/loader-bar";
 import * as DB from "../../db";
 import * as ConfigEvent from "../../observables/config-event";
 import { isAuthenticated } from "../../firebase";
@@ -479,9 +479,9 @@ $(".pageSettings #saveCustomThemeButton").on("click", async () => {
       colors: Config.customThemeColors,
     };
 
-    Loader.show();
+    showLoaderBar();
     await DB.addCustomTheme(newCustomTheme);
-    Loader.hide();
+    hideLoaderBar();
   }
   void fillCustomButtons();
 });