diff --git a/gulpfile.js b/gulpfile.js
index d58d77182..417f2c1db 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -87,7 +87,6 @@ let eslintConfig = {
 //once all files are moved here, then can we use a bundler to its full potential
 const refactoredSrc = [
   "./src/js/db.js",
-  "./src/js/dom-util.js",
   "./src/js/cloud-functions.js",
   "./src/js/misc.js",
   "./src/js/layouts.js",
@@ -133,6 +132,7 @@ const refactoredSrc = [
   "./src/js/challenge-controller.js",
   "./src/js/custom-mode2-popup.js",
   "./src/js/test/test-config.js",
+  "./src/js/loader.js",
 ];
 
 //legacy files
diff --git a/src/js/account.js b/src/js/account.js
index 706a43c91..f48c45d6b 100644
--- a/src/js/account.js
+++ b/src/js/account.js
@@ -1275,13 +1275,13 @@ function refreshGlobalStats() {
 
 function updateAccountLoginButton() {
   if (firebase.auth().currentUser != null) {
-    swapElements(
+    UI.swapElements(
       $("#menu .icon-button.login"),
       $("#menu .icon-button.account"),
       250
     );
   } else {
-    swapElements(
+    UI.swapElements(
       $("#menu .icon-button.account"),
       $("#menu .icon-button.login"),
       250
@@ -1776,7 +1776,11 @@ function refreshAccountPage() {
     ChartController.accountHistory.update({ duration: 0 });
     ChartController.accountActivity.update({ duration: 0 });
 
-    swapElements($(".pageAccount .preloader"), $(".pageAccount .content"), 250);
+    UI.swapElements(
+      $(".pageAccount .preloader"),
+      $(".pageAccount .content"),
+      250
+    );
   }
   if (DB.getSnapshot() === null) {
     Notifications.add(`Missing account data. Please refresh.`, -1);
@@ -1890,14 +1894,14 @@ $("#resultEditTagsPanel .confirmButton").click((e) => {
       newtags.push(tagid);
     }
   });
-  showBackgroundLoader();
+  Loader.show();
   hideResultEditTagsPanel();
   CloudFunctions.updateResultTags({
     uid: firebase.auth().currentUser.uid,
     tags: newtags,
     resultid: resultid,
   }).then((r) => {
-    hideBackgroundLoader();
+    Loader.hide();
     if (r.data.resultCode === 1) {
       Notifications.add("Tags updated.", 1, 2);
       DB.getSnapshot().results.forEach((result) => {
diff --git a/src/js/commandline.js b/src/js/commandline.js
index bf68daf69..02e87c27a 100644
--- a/src/js/commandline.js
+++ b/src/js/commandline.js
@@ -1,9 +1,9 @@
-import { focusWords } from "./dom-util";
 import * as Leaderboards from "./leaderboards";
 import * as ThemeController from "./theme-controller";
 import Config, * as UpdateConfig from "./config";
 import * as Focus from "./focus";
 import * as CommandlineLists from "./commandline-lists";
+import * as TestUI from "./test-ui";
 
 let commandLineMouseMode = false;
 
@@ -127,10 +127,10 @@ function hide() {
       () => {
         $("#commandLineWrapper").addClass("hidden");
         $("#commandLine").removeClass("allCommands");
-        focusWords();
+        TestUI.focusWords();
       }
     );
-  focusWords();
+  TestUI.focusWords();
 }
 
 function trigger(command) {
diff --git a/src/js/config.js b/src/js/config.js
index a2859184b..5af9326ee 100644
--- a/src/js/config.js
+++ b/src/js/config.js
@@ -15,7 +15,7 @@ import * as Keymap from "./keymap";
 import * as LanguagePicker from "./language-picker";
 import * as TestLogic from "./test-logic";
 import * as PaceCaret from "./pace-caret";
-import { updateKeytips } from "./dom-util";
+import * as UI from "./ui";
 
 export let cookieConfig = null;
 export let dbConfigLoaded = false;
@@ -454,7 +454,7 @@ export function setShowOutOfFocusWarning(val, nosave) {
 export function toggleSwapEscAndTab() {
   config.swapEscAndTab = !config.swapEscAndTab;
   saveToCookie();
-  updateKeytips();
+  UI.updateKeytips();
 }
 
 export function setSwapEscAndTab(val, nosave) {
@@ -462,7 +462,7 @@ export function setSwapEscAndTab(val, nosave) {
     val = false;
   }
   config.swapEscAndTab = val;
-  updateKeytips();
+  UI.updateKeytips();
   if (!nosave) saveToCookie();
 }
 
diff --git a/src/js/dom-util.js b/src/js/dom-util.js
deleted file mode 100644
index 4b4776dbf..000000000
--- a/src/js/dom-util.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import Config from "./config";
-
-export function showBackgroundLoader() {
-  $("#backgroundLoader").stop(true, true).fadeIn(125);
-}
-
-export function hideBackgroundLoader() {
-  $("#backgroundLoader").stop(true, true).fadeOut(125);
-}
-
-export function swapElements(
-  el1,
-  el2,
-  totalDuration,
-  callback = function () {
-    return;
-  }
-) {
-  if (
-    (el1.hasClass("hidden") && !el2.hasClass("hidden")) ||
-    (!el1.hasClass("hidden") && el2.hasClass("hidden"))
-  ) {
-    //one of them is hidden and the other is visible
-    if (el1.hasClass("hidden")) {
-      callback();
-      return false;
-    }
-    $(el1)
-      .removeClass("hidden")
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        totalDuration / 2,
-        () => {
-          $(el1).addClass("hidden");
-          $(el2)
-            .removeClass("hidden")
-            .css("opacity", 0)
-            .animate(
-              {
-                opacity: 1,
-              },
-              totalDuration / 2,
-              () => {
-                callback();
-              }
-            );
-        }
-      );
-  } else if (el1.hasClass("hidden") && el2.hasClass("hidden")) {
-    //both are hidden, only fade in the second
-    $(el2)
-      .removeClass("hidden")
-      .css("opacity", 0)
-      .animate(
-        {
-          opacity: 1,
-        },
-        totalDuration,
-        () => {
-          callback();
-        }
-      );
-  } else {
-    callback();
-  }
-}
-
-export function focusWords() {
-  if (!$("#wordsWrapper").hasClass("hidden")) {
-    $("#wordsInput").focus();
-  }
-}
-
-export function updateKeytips() {
-  if (Config.swapEscAndTab) {
-    $(".pageSettings .tip").html(`
-    tip: You can also change all these settings quickly using the
-    command line (
-    <key>tab</key>
-    )`);
-    $("#bottom .keyTips").html(`
-    <key>esc</key> - restart test<br>
-      <key>tab</key> - command line`);
-  } else {
-    $(".pageSettings .tip").html(`
-    tip: You can also change all these settings quickly using the
-    command line (
-    <key>esc</key>
-    )`);
-    $("#bottom .keyTips").html(`
-    <key>tab</key> - restart test<br>
-      <key>esc</key> - command line`);
-  }
-}
diff --git a/src/js/global-dependencies.js b/src/js/global-dependencies.js
index 82559df72..1b1e14e67 100644
--- a/src/js/global-dependencies.js
+++ b/src/js/global-dependencies.js
@@ -8,12 +8,6 @@ Chart.plugins.register(chartTrendline);
 Chart.plugins.register(chartAnnotation);
 
 import * as DB from "./db";
-import {
-  showBackgroundLoader,
-  hideBackgroundLoader,
-  swapElements,
-  focusWords,
-} from "./dom-util";
 import * as Misc from "./misc";
 import * as CloudFunctions from "./cloud-functions";
 import layouts from "./layouts";
@@ -56,3 +50,4 @@ import * as CommandlineLists from "./commandline-lists";
 import * as ChallengeController from "./challenge-controller";
 import * as CustomMode2Popup from "./custom-mode2-popup";
 import * as TestConfig from "./test-config";
+import * as Loader from "./loader";
diff --git a/src/js/leaderboards.js b/src/js/leaderboards.js
index d63a2ada9..43c384efe 100644
--- a/src/js/leaderboards.js
+++ b/src/js/leaderboards.js
@@ -1,5 +1,5 @@
 import * as CloudFunctions from "./cloud-functions";
-import { showBackgroundLoader, hideBackgroundLoader } from "./dom-util";
+import * as Loader from "./loader";
 import * as Notifications from "./notification-center";
 
 let currentLeaderboard = "time_15";
@@ -17,7 +17,6 @@ export function hide() {
         $("#leaderboardsWrapper").addClass("hidden");
       }
     );
-  // focusWords();
 }
 
 function update() {
@@ -33,7 +32,7 @@ function update() {
     uid = firebase.auth().currentUser.uid;
   }
 
-  showBackgroundLoader();
+  Loader.show();
   Promise.all([
     CloudFunctions.getLeaderboard({
       mode: boardinfo[0],
@@ -49,7 +48,7 @@ function update() {
     }),
   ])
     .then((lbdata) => {
-      hideBackgroundLoader();
+      Loader.hide();
       let dailyData = lbdata[0].data;
       let globalData = lbdata[1].data;
 
@@ -245,7 +244,7 @@ function update() {
       }
     })
     .catch((e) => {
-      hideBackgroundLoader();
+      Loader.hide();
       Notifications.add("Something went wrong: " + e.message, -1);
     });
 }
diff --git a/src/js/loader.js b/src/js/loader.js
new file mode 100644
index 000000000..a8150d109
--- /dev/null
+++ b/src/js/loader.js
@@ -0,0 +1,7 @@
+export function show() {
+  $("#backgroundLoader").stop(true, true).fadeIn(125);
+}
+
+export function hide() {
+  $("#backgroundLoader").stop(true, true).fadeOut(125);
+}
diff --git a/src/js/misc.js b/src/js/misc.js
index 6f3138c65..813d103d6 100644
--- a/src/js/misc.js
+++ b/src/js/misc.js
@@ -1,4 +1,4 @@
-import { showBackgroundLoader, hideBackgroundLoader } from "./dom-util";
+import * as Loader from "./loader";
 
 function hexToHSL(H) {
   // Convert hex to RGB first
@@ -105,10 +105,10 @@ export async function getFunboxList() {
 let quotes = null;
 export async function getQuotes(language) {
   if (quotes === null || quotes.language !== language.replace(/_\d*k$/g, "")) {
-    showBackgroundLoader();
+    Loader.show();
     try {
       let data = await $.getJSON(`quotes/${language}.json`);
-      hideBackgroundLoader();
+      Loader.hide();
       if (data.quotes === undefined || data.quotes.length === 0) {
         quotes = {
           quotes: [],
@@ -132,7 +132,7 @@ export async function getQuotes(language) {
       });
       return quotes;
     } catch {
-      hideBackgroundLoader();
+      Loader.hide();
       quotes = {
         quotes: [],
         length: 0,
@@ -305,15 +305,15 @@ export function getCookie(cname) {
 }
 
 export function sendVerificationEmail() {
-  showBackgroundLoader();
+  Loader.show();
   let cu = firebase.auth().currentUser;
   cu.sendEmailVerification()
     .then(() => {
-      hideBackgroundLoader();
+      Loader.hide();
       showNotification("Email sent to " + cu.email, 4000);
     })
     .catch((e) => {
-      hideBackgroundLoader();
+      Loader.hide();
       showNotification("Error: " + e.message, 3000);
       console.error(e.message);
     });
diff --git a/src/js/script.js b/src/js/script.js
index 2a60b7ff5..d043f9f16 100644
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -181,9 +181,9 @@ function changePage(page) {
   $("#wordsInput").focusout();
   if (page == "test" || page == "") {
     UI.setPageTransition(true);
-    swapElements(activePage, $(".page.pageTest"), 250, () => {
+    UI.swapElements(activePage, $(".page.pageTest"), 250, () => {
       UI.setPageTransition(false);
-      focusWords();
+      TestUI.focusWords();
       $(".page.pageTest").addClass("active");
       history.pushState("/", null, "/");
     });
@@ -197,7 +197,7 @@ function changePage(page) {
   } else if (page == "about") {
     UI.setPageTransition(true);
     TestLogic.restart();
-    swapElements(activePage, $(".page.pageAbout"), 250, () => {
+    UI.swapElements(activePage, $(".page.pageAbout"), 250, () => {
       UI.setPageTransition(false);
       history.pushState("about", null, "about");
       $(".page.pageAbout").addClass("active");
@@ -207,7 +207,7 @@ function changePage(page) {
   } else if (page == "settings") {
     UI.setPageTransition(true);
     TestLogic.restart();
-    swapElements(activePage, $(".page.pageSettings"), 250, () => {
+    UI.swapElements(activePage, $(".page.pageSettings"), 250, () => {
       UI.setPageTransition(false);
       history.pushState("settings", null, "settings");
       $(".page.pageSettings").addClass("active");
@@ -221,7 +221,7 @@ function changePage(page) {
     } else {
       UI.setPageTransition(true);
       TestLogic.restart();
-      swapElements(activePage, $(".page.pageAccount"), 250, () => {
+      UI.swapElements(activePage, $(".page.pageAccount"), 250, () => {
         UI.setPageTransition(false);
         history.pushState("account", null, "account");
         $(".page.pageAccount").addClass("active");
@@ -236,7 +236,7 @@ function changePage(page) {
     } else {
       UI.setPageTransition(true);
       TestLogic.restart();
-      swapElements(activePage, $(".page.pageLogin"), 250, () => {
+      UI.swapElements(activePage, $(".page.pageLogin"), 250, () => {
         UI.setPageTransition(false);
         history.pushState("login", null, "login");
         $(".page.pageLogin").addClass("active");
@@ -321,12 +321,12 @@ function tagsEdit() {
   let tagid = $("#tagsWrapper #tagsEdit").attr("tagid");
   hideEditTags();
   if (action === "add") {
-    showBackgroundLoader();
+    Loader.show();
     CloudFunctions.addTag({
       uid: firebase.auth().currentUser.uid,
       name: inputVal,
     }).then((e) => {
-      hideBackgroundLoader();
+      Loader.hide();
       let status = e.data.resultCode;
       if (status === 1) {
         Notifications.add("Tag added", 1, 2);
@@ -344,13 +344,13 @@ function tagsEdit() {
       }
     });
   } else if (action === "edit") {
-    showBackgroundLoader();
+    Loader.show();
     CloudFunctions.editTag({
       uid: firebase.auth().currentUser.uid,
       name: inputVal,
       tagid: tagid,
     }).then((e) => {
-      hideBackgroundLoader();
+      Loader.hide();
       let status = e.data.resultCode;
       if (status === 1) {
         Notifications.add("Tag updated", 1);
@@ -369,12 +369,12 @@ function tagsEdit() {
       }
     });
   } else if (action === "remove") {
-    showBackgroundLoader();
+    Loader.show();
     CloudFunctions.removeTag({
       uid: firebase.auth().currentUser.uid,
       tagid: tagid,
     }).then((e) => {
-      hideBackgroundLoader();
+      Loader.hide();
       let status = e.data.resultCode;
       if (status === 1) {
         Notifications.add("Tag removed", 1);
@@ -398,7 +398,7 @@ $(document).on("click", "#top .logo", (e) => {
 });
 
 $("#wordsWrapper").on("click", () => {
-  focusWords();
+  TestUI.focusWords();
 });
 
 $(document).on("click", "#top #menu .icon-button", (e) => {
@@ -655,7 +655,7 @@ $(document).keydown(function (event) {
     !wordsFocused &&
     event.key !== "Enter"
   ) {
-    focusWords();
+    TestUI.focusWords();
     wordsFocused = true;
     // if (Config.showOutOfFocusWarning) return;
   }
diff --git a/src/js/settings.js b/src/js/settings.js
index 7f444183a..b63fb2072 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -861,10 +861,10 @@ $(document).on(
 $(
   ".pageSettings .section.discordIntegration .buttons .generateCodeButton"
 ).click((e) => {
-  showBackgroundLoader();
+  Loader.show();
   CloudFunctions.generatePairingCode({ uid: firebase.auth().currentUser.uid })
     .then((ret) => {
-      hideBackgroundLoader();
+      Loader.hide();
       if (ret.data.status === 1 || ret.data.status === 2) {
         DB.getSnapshot().pairingCode = ret.data.pairingCode;
         $(".pageSettings .section.discordIntegration .code .bottom").text(
@@ -877,7 +877,7 @@ $(
       }
     })
     .catch((e) => {
-      hideBackgroundLoader();
+      Loader.hide();
       Notifications.add("Something went wrong. Error: " + e.message, -1);
     });
 });
@@ -885,11 +885,11 @@ $(
 $(".pageSettings .section.discordIntegration #unlinkDiscordButton").click(
   (e) => {
     if (confirm("Are you sure?")) {
-      showBackgroundLoader();
+      Loader.show();
       CloudFunctions.unlinkDiscord({
         uid: firebase.auth().currentUser.uid,
       }).then((ret) => {
-        hideBackgroundLoader();
+        Loader.hide();
         console.log(ret);
         if (ret.data.status === 1) {
           DB.getSnapshot().discordId = null;
@@ -971,7 +971,7 @@ $(".pageSettings .section.themes .tabs .button").click((e) => {
     UpdateConfig.setCustomTheme(false);
     ThemeController.set(Config.theme);
     // applyCustomThemeColors();
-    swapElements(
+    UI.swapElements(
       $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
       $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
       250
@@ -980,7 +980,7 @@ $(".pageSettings .section.themes .tabs .button").click((e) => {
     UpdateConfig.setCustomTheme(true);
     ThemeController.set("custom");
     // applyCustomThemeColors();
-    swapElements(
+    UI.swapElements(
       $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
       $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
       250
diff --git a/src/js/simple-popups.js b/src/js/simple-popups.js
index 2485c17f9..f30bba8a5 100644
--- a/src/js/simple-popups.js
+++ b/src/js/simple-popups.js
@@ -143,13 +143,13 @@ simplePopups.updateEmail = new SimplePopup(
   "Update",
   (previousEmail, newEmail) => {
     try {
-      showBackgroundLoader();
+      Loader.show();
       CloudFunctions.updateEmail({
         uid: firebase.auth().currentUser.uid,
         previousEmail: previousEmail,
         newEmail: newEmail,
       }).then((data) => {
-        hideBackgroundLoader();
+        Loader.hide();
         if (data.data.resultCode === 1) {
           Notifications.add("Email updated", 0);
           setTimeout(() => {
@@ -180,13 +180,13 @@ simplePopups.clearTagPb = new SimplePopup(
   "Clear",
   () => {
     let tagid = eval("this.parameters[0]");
-    showBackgroundLoader();
+    Loader.show();
     CloudFunctions.clearTagPb({
       uid: firebase.auth().currentUser.uid,
       tagid: tagid,
     })
       .then((res) => {
-        hideBackgroundLoader();
+        Loader.hide();
         if (res.data.resultCode === 1) {
           let tag = DB.getSnapshot().tags.filter((t) => t.id === tagid)[0];
           tag.pb = 0;
@@ -199,7 +199,7 @@ simplePopups.clearTagPb = new SimplePopup(
         }
       })
       .catch((e) => {
-        hideBackgroundLoader();
+        Loader.hide();
         Notifications.add(
           "Something went wrong while clearing tag pb " + e,
           -1
@@ -237,13 +237,13 @@ simplePopups.resetPersonalBests = new SimplePopup(
   "Reset",
   () => {
     try {
-      showBackgroundLoader();
+      Loader.show();
 
       CloudFunctions.resetPersonalBests({
         uid: firebase.auth().currentUser.uid,
       }).then((res) => {
         if (res) {
-          hideBackgroundLoader();
+          Loader.hide();
           Notifications.add(
             "Personal bests removed, refreshing the page...",
             0
diff --git a/src/js/test/test-logic.js b/src/js/test/test-logic.js
index 4981080f7..44a4ea1cc 100644
--- a/src/js/test/test-logic.js
+++ b/src/js/test/test-logic.js
@@ -17,7 +17,6 @@ import * as LiveWpm from "./live-wpm";
 import * as LiveAcc from "./live-acc";
 import * as TimerProgress from "./timer-progress";
 import * as ChartController from "./chart-controller";
-import { focusWords } from "./dom-util";
 import * as UI from "./ui";
 import * as QuoteSearchPopup from "./quote-search-popup";
 import * as PbCrown from "./pb-crown";
@@ -28,7 +27,6 @@ import * as DB from "./db";
 import * as ThemeColors from "./theme-colors";
 import * as CloudFunctions from "./cloud-functions";
 import * as TestLeaderboards from "./test-leaderboards";
-import { swapElements } from "./dom-util";
 
 export let notSignedInLastResult = null;
 
@@ -611,7 +609,7 @@ export function restart(withSameWordset = false, nosave = false, event) {
   setBailout(false);
   PaceCaret.reset();
   $("#showWordHistoryButton").removeClass("loaded");
-  focusWords();
+  TestUI.focusWords();
   Funbox.resetMemoryTimer();
 
   TestUI.reset();
@@ -729,7 +727,8 @@ export function restart(withSameWordset = false, nosave = false, event) {
             // resetPaceCaret();
             PbCrown.hide();
             TestTimer.clear();
-            if ($("#commandLineWrapper").hasClass("hidden")) focusWords();
+            if ($("#commandLineWrapper").hasClass("hidden"))
+              TestUI.focusWords();
             ChartController.result.update();
             TestUI.updateModesNotice();
             UI.setPageTransition(false);
@@ -1691,7 +1690,7 @@ export function finish(difficultyFailed = false) {
 
   ChartController.result.update({ duration: 0 });
   ChartController.result.resize();
-  swapElements($("#typingTest"), $("#result"), 250, () => {
+  UI.swapElements($("#typingTest"), $("#result"), 250, () => {
     TestUI.setResultCalculating(false);
     $("#words").empty();
     ChartController.result.resize();
diff --git a/src/js/test/test-ui.js b/src/js/test/test-ui.js
index 088929dec..b2a04dbe7 100644
--- a/src/js/test/test-ui.js
+++ b/src/js/test/test-ui.js
@@ -42,6 +42,12 @@ export function reset() {
   currentWordElementIndex = 0;
 }
 
+export function focusWords() {
+  if (!$("#wordsWrapper").hasClass("hidden")) {
+    $("#wordsInput").focus();
+  }
+}
+
 export function updateActiveElement(backspace) {
   let active = document.querySelector("#words .active");
   if (Config.mode == "zen" && backspace) {
diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js
index a4ba84304..33a353249 100644
--- a/src/js/theme-controller.js
+++ b/src/js/theme-controller.js
@@ -3,7 +3,7 @@ import * as ChartController from "./chart-controller";
 import * as Misc from "./misc";
 import * as Notifications from "./notification-center";
 import Config from "./config";
-import { swapElements } from "./dom-util";
+import * as UI from "./ui";
 
 let isPreviewingTheme = false;
 let randomTheme = null;
@@ -67,14 +67,14 @@ export function apply(themeName) {
   let name = "serika_dark";
   if (themeName !== "custom") {
     name = themeName;
-    swapElements(
+    UI.swapElements(
       $('.pageSettings [tabContent="custom"]'),
       $('.pageSettings [tabContent="preset"]'),
       250
     );
   } else {
     //is custom
-    swapElements(
+    UI.swapElements(
       $('.pageSettings [tabContent="preset"]'),
       $('.pageSettings [tabContent="custom"]'),
       250
diff --git a/src/js/ui.js b/src/js/ui.js
index 8fec116bb..e605fb56f 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -1,5 +1,89 @@
+import Config from "./config";
+
 export let pageTransition = false;
 
 export function setPageTransition(val) {
   pageTransition = val;
 }
+
+export function updateKeytips() {
+  if (Config.swapEscAndTab) {
+    $(".pageSettings .tip").html(`
+    tip: You can also change all these settings quickly using the
+    command line (
+    <key>tab</key>
+    )`);
+    $("#bottom .keyTips").html(`
+    <key>esc</key> - restart test<br>
+      <key>tab</key> - command line`);
+  } else {
+    $(".pageSettings .tip").html(`
+    tip: You can also change all these settings quickly using the
+    command line (
+    <key>esc</key>
+    )`);
+    $("#bottom .keyTips").html(`
+    <key>tab</key> - restart test<br>
+      <key>esc</key> - command line`);
+  }
+}
+
+export function swapElements(
+  el1,
+  el2,
+  totalDuration,
+  callback = function () {
+    return;
+  }
+) {
+  if (
+    (el1.hasClass("hidden") && !el2.hasClass("hidden")) ||
+    (!el1.hasClass("hidden") && el2.hasClass("hidden"))
+  ) {
+    //one of them is hidden and the other is visible
+    if (el1.hasClass("hidden")) {
+      callback();
+      return false;
+    }
+    $(el1)
+      .removeClass("hidden")
+      .css("opacity", 1)
+      .animate(
+        {
+          opacity: 0,
+        },
+        totalDuration / 2,
+        () => {
+          $(el1).addClass("hidden");
+          $(el2)
+            .removeClass("hidden")
+            .css("opacity", 0)
+            .animate(
+              {
+                opacity: 1,
+              },
+              totalDuration / 2,
+              () => {
+                callback();
+              }
+            );
+        }
+      );
+  } else if (el1.hasClass("hidden") && el2.hasClass("hidden")) {
+    //both are hidden, only fade in the second
+    $(el2)
+      .removeClass("hidden")
+      .css("opacity", 0)
+      .animate(
+        {
+          opacity: 1,
+        },
+        totalDuration,
+        () => {
+          callback();
+        }
+      );
+  } else {
+    callback();
+  }
+}