diff --git a/frontend/src/index.html b/frontend/src/index.html
index 75440c591c7a..d2424f903e4d 100644
--- 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
index 145ae98318b0..f6a594a573e4 100644
--- 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
index da87b66a29ee..2d119fbcb039 100644
--- 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
index ebd41a7fabee..13b0e23391d7 100644
--- 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
index c97566927dee..825c55df8551 100644
--- 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
new file mode 100644
index 000000000000..3dcf85d13135
--- /dev/null
+++ 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
index 83adca3ef98a..b7958c64ebe3 100644
--- 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
index f56a0f376a61..2c396ab848b3 100644
--- 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
index 8d0d1e648637..b49d1774b46e 100644
--- 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
index f71418abdb90..0e8d67363e0a 100644
--- 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
index 0d845b7c0969..b39c1cbd0bbc 100644
--- 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
index 2c92f185aab7..8330eec32390 100644
--- 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
deleted file mode 100644
index 7af07638075e..000000000000
--- a/frontend/src/ts/elements/loader.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { JSAnimation } from "animejs";
-import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { qsr } from "../utils/dom";
-
-const element = qsr("#backgroundLoader");
-let showAnim: JSAnimation | null = null;
-
-export function show(instant = false): void {
-  requestDebouncedAnimationFrame("loader.show", () => {
-    showAnim = element.animate({
-      opacity: 1,
-      duration: 125,
-      delay: instant ? 0 : 125,
-      onBegin: () => {
-        element.removeClass("hidden");
-      },
-    });
-  });
-}
-
-export function hide(): void {
-  requestDebouncedAnimationFrame("loader.hide", () => {
-    showAnim?.pause();
-    element.animate({
-      opacity: 0,
-      duration: 125,
-      onComplete: () => {
-        element.addClass("hidden");
-      },
-    });
-  });
-}
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index bcf7d6a419be..611c9ba30ddd 100644
--- 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();
 });
diff --git a/frontend/src/ts/hooks/useVisibilityAnimation.ts b/frontend/src/ts/hooks/useVisibilityAnimation.ts
new file mode 100644
index 000000000000..1aa7b7d8efa0
--- /dev/null
+++ b/frontend/src/ts/hooks/useVisibilityAnimation.ts
@@ -0,0 +1,50 @@
+import { Accessor, createEffect, onCleanup } from "solid-js";
+import { AnimationParams, JSAnimation } from "animejs";
+import { ElementWithUtils } from "../utils/dom";
+import { applyReducedMotion } from "../utils/misc";
+
+export function useVisibilityAnimation(options: {
+  element: Accessor<ElementWithUtils | undefined>;
+  isVisible: Accessor<boolean>;
+  showAnimationOptions?: AnimationParams;
+  hideAnimationOptions?: AnimationParams;
+}): void {
+  let showAnimation: undefined | JSAnimation = undefined;
+  let hideAnimation: undefined | JSAnimation = undefined;
+
+  createEffect(() => {
+    const el = options.element();
+    const visible = options.isVisible();
+
+    if (!el) return;
+
+    if (visible) {
+      hideAnimation?.pause();
+      showAnimation = el.animate({
+        opacity: 1,
+        duration: applyReducedMotion(125),
+        ...options.showAnimationOptions,
+        onBegin: (self) => {
+          el.removeClass("hidden");
+          options.showAnimationOptions?.onBegin?.(self);
+        },
+      });
+    } else {
+      showAnimation?.pause();
+      hideAnimation = el.animate({
+        opacity: 0,
+        duration: applyReducedMotion(125),
+        ...options.hideAnimationOptions,
+        onComplete: (self) => {
+          el.addClass("hidden");
+          options.hideAnimationOptions?.onComplete?.(self);
+        },
+      });
+    }
+
+    onCleanup(() => {
+      showAnimation?.pause();
+      hideAnimation?.pause();
+    });
+  });
+}
diff --git a/frontend/src/ts/input/helpers/word-navigation.ts b/frontend/src/ts/input/helpers/word-navigation.ts
index 0881ff6b87ee..56b2c99b9676 100644
--- a/frontend/src/ts/input/helpers/word-navigation.ts
+++ b/frontend/src/ts/input/helpers/word-navigation.ts
@@ -12,7 +12,7 @@ import {
 import * as TestStats from "../../test/test-stats";
 import * as Replay from "../../test/replay";
 import * as Funbox from "../../test/funbox/funbox";
-import * as Loader from "../../elements/loader";
+import { showLoaderBar, hideLoaderBar } from "../../signals/loader-bar";
 import { setInputElementValue } from "../input-element";
 import { setAwaitingNextWord } from "../state";
 import { DeleteInputType } from "./input-type";
@@ -70,9 +70,9 @@ export async function goToNextWord({
   const lastWord = TestState.activeWordIndex >= TestWords.words.length - 1;
   if (lastWord) {
     setAwaitingNextWord(true);
-    Loader.show();
+    showLoaderBar();
     await TestLogic.addWord();
-    Loader.hide();
+    hideLoaderBar();
     setAwaitingNextWord(false);
   } else {
     void TestLogic.addWord();
diff --git a/frontend/src/ts/modals/dev-options.ts b/frontend/src/ts/modals/dev-options.ts
index 894ce59b3c98..20eee52e91bc 100644
--- a/frontend/src/ts/modals/dev-options.ts
+++ b/frontend/src/ts/modals/dev-options.ts
@@ -4,7 +4,8 @@ import { showPopup } from "./simple-modals";
 import * as Notifications from "../elements/notifications";
 import { setMediaQueryDebugLevel } from "../ui";
 import { signIn } from "../auth";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import { update } from "../elements/xp-bar";
 import { toggleUserFakeChartData } from "../test/result";
 import { toggleCaretDebug } from "../utils/caret";
@@ -63,10 +64,10 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
       );
       return;
     }
-    Loader.show();
+    showLoaderBar();
     void signIn(envConfig.quickLoginEmail, envConfig.quickLoginPassword).then(
       () => {
-        Loader.hide();
+        hideLoaderBar();
       },
     );
     void modal.hide();
diff --git a/frontend/src/ts/modals/edit-preset.ts b/frontend/src/ts/modals/edit-preset.ts
index e4ea8a6b66a7..2110d1df0750 100644
--- a/frontend/src/ts/modals/edit-preset.ts
+++ b/frontend/src/ts/modals/edit-preset.ts
@@ -1,7 +1,8 @@
 import Ape from "../ape";
 import * as DB from "../db";
 import * as Config from "../config";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as Settings from "../pages/settings";
 import * as Notifications from "../elements/notifications";
 import * as ConnectionState from "../states/connection";
@@ -272,7 +273,7 @@ async function apply(): Promise<void> {
 
   hide();
 
-  Loader.show();
+  showLoaderBar();
 
   if (action === "add") {
     const configChanges = getConfigChanges();
@@ -361,7 +362,7 @@ async function apply(): Promise<void> {
   }
 
   void Settings.update();
-  Loader.hide();
+  hideLoaderBar();
 }
 
 function getSettingGroup(configFieldName: ConfigKey): ConfigGroupName {
diff --git a/frontend/src/ts/modals/edit-profile.ts b/frontend/src/ts/modals/edit-profile.ts
index d6e1ed0a3f82..88aafaae0407 100644
--- a/frontend/src/ts/modals/edit-profile.ts
+++ b/frontend/src/ts/modals/edit-profile.ts
@@ -1,7 +1,8 @@
 import Ape from "../ape";
 import { getHTMLById } from "../controllers/badge-controller";
 import * as DB from "../db";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as Notifications from "../elements/notifications";
 import * as ConnectionState from "../states/connection";
 import AnimatedModal from "../utils/animated-modal";
@@ -174,14 +175,14 @@ async function updateProfile(): Promise<void> {
     return;
   }
 
-  Loader.show();
+  showLoaderBar();
   const response = await Ape.users.updateProfile({
     body: {
       ...updates,
       selectedBadgeId: currentSelectedBadgeId,
     },
   });
-  Loader.hide();
+  hideLoaderBar();
 
   if (response.status !== 200) {
     Notifications.add("Failed to update profile", -1, { response });
diff --git a/frontend/src/ts/modals/edit-result-tags.ts b/frontend/src/ts/modals/edit-result-tags.ts
index 1e375e08580c..50240766463f 100644
--- a/frontend/src/ts/modals/edit-result-tags.ts
+++ b/frontend/src/ts/modals/edit-result-tags.ts
@@ -1,6 +1,7 @@
 import Ape from "../ape";
 import * as DB from "../db";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as Notifications from "../elements/notifications";
 import * as AccountPage from "../pages/account";
 import * as ConnectionState from "../states/connection";
@@ -110,11 +111,11 @@ function toggleTag(tagId: string): void {
 }
 
 async function save(): Promise<void> {
-  Loader.show();
+  showLoaderBar();
   const response = await Ape.results.updateTags({
     body: { resultId: state.resultId, tagIds: state.tags },
   });
-  Loader.hide();
+  hideLoaderBar();
 
   //if got no freaking idea why this is needed
   //but update tags somehow adds undefined to the end of the array
diff --git a/frontend/src/ts/modals/forgot-password.ts b/frontend/src/ts/modals/forgot-password.ts
index 504b8f312997..704bde7059a3 100644
--- a/frontend/src/ts/modals/forgot-password.ts
+++ b/frontend/src/ts/modals/forgot-password.ts
@@ -2,7 +2,8 @@ import * as CaptchaController from "../controllers/captcha-controller";
 import AnimatedModal from "../utils/animated-modal";
 import Ape from "../ape/index";
 import * as Notifications from "../elements/notifications";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import { UserEmailSchema } from "@monkeytype/schemas/users";
 import { ElementWithUtils } from "../utils/dom";
 
@@ -54,13 +55,13 @@ async function submit(): Promise<void> {
     return;
   }
 
-  Loader.show();
+  showLoaderBar();
   void Ape.users
     .forgotPasswordEmail({
       body: { email, captcha: captchaResponse },
     })
     .then((result) => {
-      Loader.hide();
+      hideLoaderBar();
       if (result.status !== 200) {
         Notifications.add(
           "Failed to send password reset email: " + result.body.message,
diff --git a/frontend/src/ts/modals/google-sign-up.ts b/frontend/src/ts/modals/google-sign-up.ts
index 9b96bb06c48e..82243dc629e2 100644
--- a/frontend/src/ts/modals/google-sign-up.ts
+++ b/frontend/src/ts/modals/google-sign-up.ts
@@ -11,7 +11,8 @@ import { createErrorMessage } from "../utils/misc";
 import * as LoginPage from "../pages/login";
 import * as AccountController from "../auth";
 import * as CaptchaController from "../controllers/captcha-controller";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import { subscribe as subscribeToSignUpEvent } from "../observables/google-sign-up-event";
 import AnimatedModal from "../utils/animated-modal";
 import { resetIgnoreAuthCallback } from "../firebase";
@@ -92,7 +93,7 @@ async function apply(): Promise<void> {
   disableInput();
   disableButton();
 
-  Loader.show();
+  showLoaderBar();
   const name = modal
     .getModal()
     .qsr<HTMLInputElement>("input")
@@ -113,7 +114,7 @@ async function apply(): Promise<void> {
       await AccountController.loadUser(signedInUser.user);
 
       signedInUser = undefined;
-      Loader.hide();
+      hideLoaderBar();
       void hide();
     }
   } catch (e) {
@@ -132,7 +133,7 @@ async function apply(): Promise<void> {
     AccountController.signOut();
     signedInUser = undefined;
     void hide();
-    Loader.hide();
+    hideLoaderBar();
     return;
   }
 }
diff --git a/frontend/src/ts/modals/quote-approve.ts b/frontend/src/ts/modals/quote-approve.ts
index a1b990e54160..1a05597d357a 100644
--- a/frontend/src/ts/modals/quote-approve.ts
+++ b/frontend/src/ts/modals/quote-approve.ts
@@ -1,5 +1,6 @@
 import Ape from "../ape";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as Notifications from "../elements/notifications";
 import { format } from "date-fns/format";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
@@ -86,9 +87,9 @@ function updateQuoteLength(index: number): void {
 }
 
 async function getQuotes(): Promise<void> {
-  Loader.show();
+  showLoaderBar();
   const response = await Ape.quotes.get();
-  Loader.hide();
+  hideLoaderBar();
 
   if (response.status !== 200) {
     Notifications.add("Failed to get new quotes", -1, { response });
@@ -143,11 +144,11 @@ async function approveQuote(index: number, dbid: string): Promise<void> {
   quote.qsa("button").disable();
   quote.qsa("textarea, input").disable();
 
-  Loader.show();
+  showLoaderBar();
   const response = await Ape.quotes.approveSubmission({
     body: { quoteId: dbid },
   });
-  Loader.hide();
+  hideLoaderBar();
 
   if (response.status !== 200) {
     resetButtons(index);
@@ -167,11 +168,11 @@ async function refuseQuote(index: number, dbid: string): Promise<void> {
   quote.qsa("button").disable();
   quote.qsa("textarea, input").disable();
 
-  Loader.show();
+  showLoaderBar();
   const response = await Ape.quotes.rejectSubmission({
     body: { quoteId: dbid },
   });
-  Loader.hide();
+  hideLoaderBar();
 
   if (response.status !== 200) {
     resetButtons(index);
@@ -198,7 +199,7 @@ async function editQuote(index: number, dbid: string): Promise<void> {
   quote.qsa("button").disable();
   quote.qsa("textarea, input").disable();
 
-  Loader.show();
+  showLoaderBar();
   const response = await Ape.quotes.approveSubmission({
     body: {
       quoteId: dbid,
@@ -206,7 +207,7 @@ async function editQuote(index: number, dbid: string): Promise<void> {
       editSource,
     },
   });
-  Loader.hide();
+  hideLoaderBar();
 
   if (response.status !== 200) {
     resetButtons(index);
diff --git a/frontend/src/ts/modals/quote-rate.ts b/frontend/src/ts/modals/quote-rate.ts
index f3201e388d67..7dd4c39ef837 100644
--- a/frontend/src/ts/modals/quote-rate.ts
+++ b/frontend/src/ts/modals/quote-rate.ts
@@ -2,7 +2,7 @@ import { Language } from "@monkeytype/schemas/languages";
 import Ape from "../ape";
 import { Quote } from "../controllers/quotes-controller";
 import * as DB from "../db";
-import * as Loader from "../elements/loader";
+import { hideLoaderBar, showLoaderBar } from "../signals/loader-bar";
 import * as Notifications from "../elements/notifications";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
 import { isSafeNumber } from "@monkeytype/util/numbers";
@@ -55,11 +55,12 @@ export async function getQuoteStats(
     return;
   }
 
+  showLoaderBar();
   currentQuote = quote;
   const response = await Ape.quotes.getRating({
     query: { quoteId: currentQuote.id, language: currentQuote.language },
   });
-  Loader.hide();
+  hideLoaderBar();
 
   if (response.status !== 200) {
     Notifications.add("Failed to get quote ratings", -1, { response });
@@ -155,10 +156,11 @@ async function submit(): Promise<void> {
 
   hide(true);
 
+  showLoaderBar();
   const response = await Ape.quotes.addRating({
     body: { quoteId: currentQuote.id, language: currentQuote.language, rating },
   });
-  Loader.hide();
+  hideLoaderBar();
 
   if (response.status !== 200) {
     Notifications.add("Failed to submit quote rating", -1, { response });
diff --git a/frontend/src/ts/modals/quote-report.ts b/frontend/src/ts/modals/quote-report.ts
index 871fbf070501..90a854453dc9 100644
--- a/frontend/src/ts/modals/quote-report.ts
+++ b/frontend/src/ts/modals/quote-report.ts
@@ -1,7 +1,8 @@
 import { ElementWithUtils, qsr } from "../utils/dom";
 import Ape from "../ape";
 import Config from "../config";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as Notifications from "../elements/notifications";
 import QuotesController, { Quote } from "../controllers/quotes-controller";
 import * as CaptchaController from "../controllers/captcha-controller";
@@ -112,7 +113,7 @@ async function submitReport(): Promise<void> {
     return;
   }
 
-  Loader.show();
+  showLoaderBar();
   const response = await Ape.quotes.report({
     body: {
       quoteId,
@@ -122,7 +123,7 @@ async function submitReport(): Promise<void> {
       captcha,
     },
   });
-  Loader.hide();
+  hideLoaderBar();
 
   if (response.status !== 200) {
     Notifications.add("Failed to report quote", -1, { response });
diff --git a/frontend/src/ts/modals/quote-search.ts b/frontend/src/ts/modals/quote-search.ts
index 528a499dd98d..7dc67ba651b8 100644
--- a/frontend/src/ts/modals/quote-search.ts
+++ b/frontend/src/ts/modals/quote-search.ts
@@ -15,7 +15,8 @@ import QuotesController, { Quote } from "../controllers/quotes-controller";
 import { isAuthenticated } from "../firebase";
 import { debounce } from "throttle-debounce";
 import Ape from "../ape";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import SlimSelect from "slim-select";
 import * as TestState from "../test/test-state";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
@@ -479,12 +480,12 @@ async function toggleFavoriteForQuote(quoteId: string): Promise<void> {
 
   if (alreadyFavorited) {
     try {
-      Loader.show();
+      showLoaderBar();
       await QuotesController.setQuoteFavorite(quote, false);
-      Loader.hide();
+      hideLoaderBar();
       $button.removeClass("fas").addClass("far");
     } catch (e) {
-      Loader.hide();
+      hideLoaderBar();
       const message = createErrorMessage(
         e,
         "Failed to remove quote from favorites",
@@ -493,12 +494,12 @@ async function toggleFavoriteForQuote(quoteId: string): Promise<void> {
     }
   } else {
     try {
-      Loader.show();
+      showLoaderBar();
       await QuotesController.setQuoteFavorite(quote, true);
-      Loader.hide();
+      hideLoaderBar();
       $button.removeClass("far").addClass("fas");
     } catch (e) {
-      Loader.hide();
+      hideLoaderBar();
       const message = createErrorMessage(e, "Failed to add quote to favorites");
       Notifications.add(message, -1);
     }
@@ -524,13 +525,13 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
     });
   });
   modalEl.qs(".goToQuoteSubmit")?.on("click", async (e) => {
-    Loader.show();
+    showLoaderBar();
     const getSubmissionEnabled = await Ape.quotes.isSubmissionEnabled();
     const isSubmissionEnabled =
       (getSubmissionEnabled.status === 200 &&
         getSubmissionEnabled.body.data?.isEnabled) ??
       false;
-    Loader.hide();
+    hideLoaderBar();
     if (!isSubmissionEnabled) {
       Notifications.add(
         "Quote submission is disabled temporarily due to a large submission queue.",
diff --git a/frontend/src/ts/modals/quote-submit.ts b/frontend/src/ts/modals/quote-submit.ts
index 52418a27ae2f..d3d7822bd123 100644
--- a/frontend/src/ts/modals/quote-submit.ts
+++ b/frontend/src/ts/modals/quote-submit.ts
@@ -1,6 +1,7 @@
 import { ElementWithUtils } from "../utils/dom";
 import Ape from "../ape";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as Notifications from "../elements/notifications";
 import * as CaptchaController from "../controllers/captcha-controller";
 import * as Strings from "../utils/strings";
@@ -47,11 +48,11 @@ async function submitQuote(): Promise<void> {
     return;
   }
 
-  Loader.show();
+  showLoaderBar();
   const response = await Ape.quotes.add({
     body: { text, source, language, captcha },
   });
-  Loader.hide();
+  hideLoaderBar();
 
   if (response.status !== 200) {
     Notifications.add("Failed to submit quote", -1, { response });
diff --git a/frontend/src/ts/modals/streak-hour-offset.ts b/frontend/src/ts/modals/streak-hour-offset.ts
index 6a84d22ff990..cba4eca045f7 100644
--- a/frontend/src/ts/modals/streak-hour-offset.ts
+++ b/frontend/src/ts/modals/streak-hour-offset.ts
@@ -1,7 +1,8 @@
 import Ape from "../ape";
 // 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 * as Settings from "../pages/settings";
 import * as ConnectionState from "../states/connection";
 import { getSnapshot, setSnapshot } from "../db";
@@ -93,12 +94,12 @@ async function apply(): Promise<void> {
     return;
   }
 
-  Loader.show();
+  showLoaderBar();
 
   const response = await Ape.users.setStreakHourOffset({
     body: { hourOffset: value },
   });
-  Loader.hide();
+  hideLoaderBar();
 
   if (response.status !== 200) {
     Notifications.add("Failed to set streak hour offset", -1, { response });
diff --git a/frontend/src/ts/modals/user-report.ts b/frontend/src/ts/modals/user-report.ts
index 41b1f44f555a..2aafbbaff246 100644
--- a/frontend/src/ts/modals/user-report.ts
+++ b/frontend/src/ts/modals/user-report.ts
@@ -1,5 +1,6 @@
 import Ape from "../ape";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as Notifications from "../elements/notifications";
 import * as CaptchaController from "../controllers/captcha-controller";
 import SlimSelect from "slim-select";
@@ -119,7 +120,7 @@ async function submitReport(): Promise<void> {
     return;
   }
 
-  Loader.show();
+  showLoaderBar();
   const response = await Ape.users.report({
     body: {
       uid: state.userUid as string,
@@ -128,7 +129,7 @@ async function submitReport(): Promise<void> {
       captcha,
     },
   });
-  Loader.hide();
+  hideLoaderBar();
 
   if (response.status !== 200) {
     Notifications.add("Failed to report user", -1, { response });
diff --git a/frontend/src/ts/pages/account-settings.ts b/frontend/src/ts/pages/account-settings.ts
index 69b4a3e7ec2a..c34f216d2928 100644
--- a/frontend/src/ts/pages/account-settings.ts
+++ b/frontend/src/ts/pages/account-settings.ts
@@ -6,7 +6,7 @@ import { swapElements } from "../utils/misc";
 import { getSnapshot } from "../db";
 import Ape from "../ape";
 import * as StreakHourOffsetModal from "../modals/streak-hour-offset";
-import * as Loader from "../elements/loader";
+import { showLoaderBar } from "../signals/loader-bar";
 import * as ApeKeyTable from "../elements/account-settings/ape-key-table";
 import * as BlockedUserTable from "../elements/account-settings/blocked-user-table";
 import * as Notifications from "../elements/notifications";
@@ -169,7 +169,7 @@ qs(".page.pageAccountSettings")?.onChild("click", ".tabs button", (event) => {
 qsa(
   ".page.pageAccountSettings .section.discordIntegration .getLinkAndGoToOauth",
 )?.on("click", () => {
-  Loader.show();
+  showLoaderBar();
   void Ape.users.getDiscordOAuth().then((response) => {
     if (response.status === 200) {
       window.open(response.body.data.url, "_self");
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index 9e6c9d9d580a..10bd0ee800fe 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -21,7 +21,8 @@ import type { ScaleChartOptions, LinearScaleOptions } from "chart.js";
 import * as ConfigEvent from "../observables/config-event";
 import { getActivePage } from "../signals/core";
 import { getAuthenticatedUser } from "../firebase";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as ResultBatches from "../elements/result-batches";
 import Format from "../utils/format";
 import * as TestActivity from "../elements/test-activity";
@@ -1105,12 +1106,12 @@ qs(".pageAccount")?.onChild(
       target?.addClass("loading");
       target?.removeAttribute("aria-label");
       target?.setHtml('<i class="fas fa-fw fa-spin fa-circle-notch"></i>');
-      Loader.show();
+      showLoaderBar();
 
       const response = await Ape.results.getById({
         params: { resultId: result._id },
       });
-      Loader.hide();
+      hideLoaderBar();
 
       target?.setHtml('<i class="fas fa-fw fa-chart-line"></i>');
       target?.removeClass("loading");
@@ -1195,12 +1196,12 @@ qs(".pageAccount .profile")?.onChild("click", ".details .copyLink", () => {
 qs(".pageAccount button.loadMoreResults")?.on("click", async () => {
   const offset = DB.getSnapshot()?.results?.length ?? 0;
 
-  Loader.show();
+  showLoaderBar();
   ResultBatches.disableButton();
 
   await downloadResults(offset);
   await fillContent();
-  Loader.hide();
+  hideLoaderBar();
 });
 
 ConfigEvent.subscribe(({ key }) => {
diff --git a/frontend/src/ts/pages/friends.ts b/frontend/src/ts/pages/friends.ts
index 48a8eee47090..5e7704f027db 100644
--- a/frontend/src/ts/pages/friends.ts
+++ b/frontend/src/ts/pages/friends.ts
@@ -27,7 +27,8 @@ import * as ServerConfiguration from "../ape/server-configuration";
 import * as AuthEvent from "../observables/auth-event";
 import { Connection } from "@monkeytype/schemas/connections";
 import { Friend, UserNameSchema } from "@monkeytype/schemas/users";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
 import { remoteValidation } from "../utils/remote-validation";
 import { qs, qsr, onDOMReady } from "../utils/dom";
@@ -417,7 +418,7 @@ qs(".pageFriends .pendingRequests table")?.on("click", async (e) => {
   }
   row.querySelectorAll("button").forEach((button) => (button.disabled = true));
 
-  Loader.show();
+  showLoaderBar();
   const result =
     action === "rejected"
       ? await Ape.connections.delete({
@@ -427,7 +428,7 @@ qs(".pageFriends .pendingRequests table")?.on("click", async (e) => {
           params: { id },
           body: { status: action },
         });
-  Loader.hide();
+  hideLoaderBar();
 
   if (result.status !== 200) {
     Notifications.add(
diff --git a/frontend/src/ts/signals/loader-bar.ts b/frontend/src/ts/signals/loader-bar.ts
new file mode 100644
index 000000000000..cbefe5071230
--- /dev/null
+++ b/frontend/src/ts/signals/loader-bar.ts
@@ -0,0 +1,28 @@
+import { createSignal } from "solid-js";
+
+type LoaderSignal = null | {
+  visible: boolean;
+  instant?: boolean;
+};
+
+const [getLoaderBarSignal, set] = createSignal<LoaderSignal>(null);
+
+export function showLoaderBar(instant = false): void {
+  const current = getLoaderBarSignal();
+  // Don't update if already showing (unless instant flag changed)
+  if (current?.visible && current.instant === instant) {
+    return;
+  }
+  set({ visible: true, instant });
+}
+
+export function hideLoaderBar(): void {
+  const current = getLoaderBarSignal();
+  // Don't update if already hidden
+  if (current?.visible === false) {
+    return;
+  }
+  set({ visible: false });
+}
+
+export { getLoaderBarSignal };
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index faedc8adbcfb..451887f7d296 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -5,7 +5,8 @@ import * as AdController from "../controllers/ad-controller";
 import * as ChartController from "../controllers/chart-controller";
 import QuotesController, { Quote } from "../controllers/quotes-controller";
 import * as DB from "../db";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as Notifications from "../elements/notifications";
 import * as ThemeColors from "../elements/theme-colors";
 import { isAuthenticated } from "../firebase";
@@ -1348,14 +1349,14 @@ $(".pageTest #favoriteQuoteButton").on("click", async () => {
 
   if ($button.hasClass("fas")) {
     // Remove from
-    Loader.show();
+    showLoaderBar();
     const response = await Ape.users.removeQuoteFromFavorites({
       body: {
         language: quoteLang,
         quoteId,
       },
     });
-    Loader.hide();
+    hideLoaderBar();
 
     Notifications.add(response.body.message, response.status === 200 ? 1 : -1);
 
@@ -1368,11 +1369,11 @@ $(".pageTest #favoriteQuoteButton").on("click", async () => {
     }
   } else {
     // Add to favorites
-    Loader.show();
+    showLoaderBar();
     const response = await Ape.users.addQuoteToFavorites({
       body: { language: quoteLang, quoteId },
     });
-    Loader.hide();
+    hideLoaderBar();
 
     Notifications.add(response.body.message, response.status === 200 ? 1 : -1);
 
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 325050e0800f..d8c5be184470 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -61,7 +61,7 @@ import { SnapshotResult } from "../constants/default-snapshot";
 import { WordGenError } from "../utils/word-gen-error";
 import { tryCatch } from "@monkeytype/util/trycatch";
 import * as Sentry from "../sentry";
-import * as Loader from "../elements/loader";
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as TestInitFailed from "../elements/test-init-failed";
 import { canQuickRestart } from "../utils/quick-restart";
 import { animate } from "animejs";
@@ -368,11 +368,11 @@ async function init(): Promise<boolean> {
   TestInput.input.resetHistory();
   TestInput.input.current = "";
 
-  Loader.show();
+  showLoaderBar();
   const { data: language, error } = await tryCatch(
     JSONData.getLanguage(Config.language),
   );
-  Loader.hide();
+  hideLoaderBar();
 
   if (error) {
     Notifications.add(
@@ -493,7 +493,7 @@ async function init(): Promise<boolean> {
     wordsHaveNewline = gen.hasNewline;
     ({ allRightToLeft, allLigatures } = gen);
   } catch (e) {
-    Loader.hide();
+    hideLoaderBar();
     if (e instanceof WordGenError || e instanceof Error) {
       lastInitError = e;
     }
diff --git a/frontend/src/ts/test/test-screenshot.ts b/frontend/src/ts/test/test-screenshot.ts
index 105275216431..eec120b2a2eb 100644
--- a/frontend/src/ts/test/test-screenshot.ts
+++ b/frontend/src/ts/test/test-screenshot.ts
@@ -1,4 +1,4 @@
-import * as Loader from "../elements/loader";
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as Replay from "./replay";
 import * as Misc from "../utils/misc";
 import { isAuthenticated } from "../firebase";
@@ -16,7 +16,7 @@ let revealReplay = false;
 let revertCookie = false;
 
 function revert(): void {
-  Loader.hide();
+  hideLoaderBar();
   $("#ad-result-wrapper").removeClass("hidden");
   $("#ad-result-small-wrapper").removeClass("hidden");
   $("#testConfig").removeClass("hidden");
@@ -53,7 +53,7 @@ let firefoxClipboardNotificationShown = false;
  */
 async function generateCanvas(): Promise<HTMLCanvasElement | null> {
   const { domToCanvas } = await import("modern-screenshot");
-  Loader.show(true);
+  showLoaderBar(true);
 
   if (!$("#resultReplay").hasClass("hidden")) {
     revealReplay = true;
diff --git a/frontend/src/ts/test/wikipedia.ts b/frontend/src/ts/test/wikipedia.ts
index ddb2bc7cbd29..fc5470228958 100644
--- a/frontend/src/ts/test/wikipedia.ts
+++ b/frontend/src/ts/test/wikipedia.ts
@@ -1,4 +1,4 @@
-import * as Loader from "../elements/loader";
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as Misc from "../utils/misc";
 import * as Strings from "../utils/strings";
 import * as JSONData from "../utils/json-data";
@@ -261,7 +261,7 @@ export async function getSection(
   language: Language,
 ): Promise<JSONData.Section> {
   // console.log("Getting section");
-  Loader.show();
+  showLoaderBar();
 
   // get TLD for wikipedia according to language group
   let urlTLD = "en";
@@ -285,7 +285,7 @@ export async function getSection(
 
   return new Promise((res, rej) => {
     if (randomPostReq.status !== 200) {
-      Loader.hide();
+      hideLoaderBar();
       rej(randomPostReq.status);
     }
     const sectionURL = `https://${urlTLD}.wikipedia.org/w/api.php?action=query&format=json&pageids=${pageid}&prop=extracts&exintro=true&origin=*`;
@@ -300,7 +300,7 @@ export async function getSection(
           );
           const page = parsedResponse.query.pages[pageid.toString()];
           if (!page) {
-            Loader.hide();
+            hideLoaderBar();
             rej("Page not found");
             return;
           }
@@ -339,10 +339,10 @@ export async function getSection(
             sectionObj.author,
             words,
           );
-          Loader.hide();
+          hideLoaderBar();
           res(section);
         } else {
-          Loader.hide();
+          hideLoaderBar();
           rej(sectionReq.status);
         }
       }
diff --git a/frontend/src/ts/test/words-generator.ts b/frontend/src/ts/test/words-generator.ts
index c578bc4dfd08..e36dfdf0206e 100644
--- a/frontend/src/ts/test/words-generator.ts
+++ b/frontend/src/ts/test/words-generator.ts
@@ -23,7 +23,8 @@ import {
   isFunboxActiveWithFunction,
 } from "./funbox/list";
 import { WordGenError } from "../utils/word-gen-error";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import { PolyglotWordset } from "./funbox/funbox-functions";
 import { LanguageObject } from "@monkeytype/schemas/languages";
 
@@ -515,12 +516,12 @@ async function getQuoteWordList(
     ? "german"
     : language.name;
 
-  Loader.show();
+  showLoaderBar();
   const quotesCollection = await QuotesController.getQuotes(
     languageToGet,
     Config.quoteLength,
   );
-  Loader.hide();
+  hideLoaderBar();
 
   if (quotesCollection.length === 0) {
     setConfig("mode", "words");
diff --git a/frontend/src/ts/utils/async-modules.ts b/frontend/src/ts/utils/async-modules.ts
index 5f0f03074ebe..8837399b590f 100644
--- a/frontend/src/ts/utils/async-modules.ts
+++ b/frontend/src/ts/utils/async-modules.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 { createErrorMessage } from "./misc";
 import * as Skeleton from "../utils/skeleton";
@@ -9,13 +9,13 @@ export async function getDevOptionsModal(): Promise<
   typeof import("../modals/dev-options.js")
 > {
   try {
-    Loader.show();
+    showLoaderBar();
     // oxlint-disable-next-line import/no-unresolved
     const module = await import("../modals/dev-options.js");
-    Loader.hide();
+    hideLoaderBar();
     return module;
   } catch (e) {
-    Loader.hide();
+    hideLoaderBar();
     if (
       e instanceof Error &&
       e.message.includes("Failed to fetch dynamically imported module")
diff --git a/frontend/src/ts/utils/misc.ts b/frontend/src/ts/utils/misc.ts
index 6e6ea8fca4ca..27715d1a6ceb 100644
--- a/frontend/src/ts/utils/misc.ts
+++ b/frontend/src/ts/utils/misc.ts
@@ -1,4 +1,4 @@
-import * as Loader from "../elements/loader";
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import { envConfig } from "virtual:env-config";
 import { lastElementFromArray } from "./arrays";
 import { Config } from "@monkeytype/schemas/configs";
@@ -271,7 +271,7 @@ export function getMode2<M extends keyof PersonalBests>(
 }
 
 export async function downloadResultsCSV(array: Result<Mode>[]): Promise<void> {
-  Loader.show();
+  showLoaderBar();
   const csvString = [
     [
       "_id",
@@ -340,7 +340,7 @@ export async function downloadResultsCSV(array: Result<Mode>[]): Promise<void> {
 
   link.click();
   link.remove();
-  Loader.hide();
+  hideLoaderBar();
 }
 
 export function getErrorMessage(error: unknown): string | undefined {
@@ -619,7 +619,7 @@ export function promiseWithResolvers<T = void>(): {
 
   const promiseLike = {
     // oxlint-disable-next-line no-thenable promise-function-async require-await
-    then<TResult1 = T, TResult2 = never>(
+    async then<TResult1 = T, TResult2 = never>(
       onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
       onrejected?:
         | ((reason: unknown) => TResult2 | PromiseLike<TResult2>)
@@ -628,13 +628,13 @@ export function promiseWithResolvers<T = void>(): {
       return currentPromise.then(onfulfilled, onrejected);
     },
     // oxlint-disable-next-line promise-function-async
-    catch<TResult = never>(
+    async catch<TResult = never>(
       onrejected?: ((reason: unknown) => TResult | PromiseLike<TResult>) | null,
     ): Promise<T | TResult> {
       return currentPromise.catch(onrejected);
     },
     // oxlint-disable-next-line promise-function-async
-    finally(onfinally?: (() => void) | null): Promise<T> {
+    async finally(onfinally?: (() => void) | null): Promise<T> {
       return currentPromise.finally(onfinally);
     },
     [Symbol.toStringTag]: "Promise" as const,
diff --git a/frontend/src/ts/utils/simple-modal.ts b/frontend/src/ts/utils/simple-modal.ts
index 5396bede641a..10318d5385bb 100644
--- a/frontend/src/ts/utils/simple-modal.ts
+++ b/frontend/src/ts/utils/simple-modal.ts
@@ -1,7 +1,8 @@
 import AnimatedModal, { HideOptions, ShowOptions } from "./animated-modal";
 import { Attributes, buildTag } from "./tag-builder";
 import { format as dateFormat } from "date-fns/format";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as Notifications from "../elements/notifications";
 import * as ConnectionState from "../states/connection";
 import {
@@ -372,10 +373,10 @@ export class SimpleModal {
     }
 
     this.disableInputs();
-    Loader.show();
+    showLoaderBar();
     const vals: string[] = this.inputs.map((it) => it.currentValue());
     void this.execFn(this, ...vals).then((res) => {
-      Loader.hide();
+      hideLoaderBar();
       if (res.showNotification ?? true) {
         Notifications.add(res.message, res.status, res.notificationOptions);
       }
diff --git a/frontend/src/ts/utils/url-handler.ts b/frontend/src/ts/utils/url-handler.ts
index 5f8b971abdfd..6f039a3c5a26 100644
--- a/frontend/src/ts/utils/url-handler.ts
+++ b/frontend/src/ts/utils/url-handler.ts
@@ -7,7 +7,8 @@ import * as ManualRestart from "../test/manual-restart-tracker";
 import * as CustomText from "../test/custom-text";
 import Ape from "../ape";
 import * as DB from "../db";
-import * as Loader from "../elements/loader";
+
+import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
 import * as AccountButton from "../elements/account-button";
 import { restart as restartTest } from "../test/test-logic";
 import * as ChallengeController from "../controllers/challenge-controller";
@@ -42,11 +43,11 @@ export async function linkDiscord(hashOverride: string): Promise<void> {
     const tokenType = fragment.get("token_type") as string;
     const state = fragment.get("state") as string;
 
-    Loader.show();
+    showLoaderBar();
     const response = await Ape.users.linkDiscord({
       body: { tokenType, accessToken, state },
     });
-    Loader.hide();
+    hideLoaderBar();
 
     if (response.status !== 200) {
       Notifications.add("Failed to link Discord", -1, { response });
