impr: show loading bar when fetching language/quotes to indicate background activity

Author: Miodec

frontend/src/ts/test/test-logic.ts

@@ -76,6 +76,7 @@ import { SnapshotResult } from "../constants/default-snapshot";
 import { WordGenError } from "../utils/word-gen-error";
 import { tryCatch } from "@monkeytype/util/trycatch";
 import { captureException } from "../sentry";
+import * as Loader from "../elements/loader";
 
 let failReason = "";
 const koInputVisual = document.getElementById("koInputVisual") as HTMLElement;
@@ -410,9 +411,12 @@ export async function init(): Promise<void> {
   TestInput.input.resetHistory();
   TestInput.input.current = "";
 
+  Loader.show();
   const { data: language, error } = await tryCatch(
     JSONData.getLanguage(Config.language)
   );
+  Loader.hide();
+
   if (error) {
     Notifications.add(
       Misc.createErrorMessage(error, "Failed to load language"),

frontend/src/ts/test/words-generator.ts

@@ -23,6 +23,7 @@ import {
   isFunboxActiveWithFunction,
 } from "./funbox/list";
 import { WordGenError } from "../utils/word-gen-error";
+import * as Loader from "../elements/loader";
 
 function shouldCapitalize(lastChar: string): boolean {
   return /[?!.؟]/.test(lastChar);
@@ -499,10 +500,12 @@ async function getQuoteWordList(
     ? "german"
     : language.name;
 
+  Loader.show();
   const quotesCollection = await QuotesController.getQuotes(
     languageToGet,
     Config.quoteLength
   );
+  Loader.hide();
 
   if (quotesCollection.length === 0) {
     UpdateConfig.setMode("words");