added loading bar to account page

src/js/account.js

@@ -58,7 +58,11 @@ export async function getDataAndInit() {
     AccountController.signOut();
     return;
   }
-  LoadingPage.updateBar(90);
+  if ($(".pageLoading").hasClass("active")) {
+    LoadingPage.updateBar(90);
+  } else {
+    LoadingPage.updateBar(65.9);
+  }
   LoadingPage.updateText("Applying settings...");
   let snap = DB.getSnapshot();
   $("#menu .icon-button.account .text").text(snap.name);
@@ -219,8 +223,12 @@ export async function getDataAndInit() {
   Settings.showAccountSection();
   UI.setPageTransition(false);
   console.log("account loading finished");
-  LoadingPage.updateBar(100);
-  if ($(".pageLoading").hasClass("active")) UI.changePage("");
+  if ($(".pageLoading").hasClass("active")) {
+    LoadingPage.updateBar(100);
+    UI.changePage("");
+  } else {
+    LoadingPage.updateBar(62.6);
+  }
 }
 
 let filteredResults = [];
@@ -377,6 +385,8 @@ let totalSecondsFiltered = 0;
 
 export function update() {
   function cont() {
+    LoadingPage.updateText("Displaying stats...");
+    LoadingPage.updateBar(90);
     console.log("updating account page");
     ThemeColors.update();
     ChartController.accountHistory.updateColors();
@@ -1005,7 +1015,7 @@ export function update() {
 
     ChartController.accountHistory.update({ duration: 0 });
     ChartController.accountActivity.update({ duration: 0 });
-
+    LoadingPage.updateBar(100);
     UI.swapElements(
       $(".pageAccount .preloader"),
       $(".pageAccount .content"),

src/js/db.js

@@ -52,7 +52,11 @@ export async function initSnapshot() {
   let snap = defaultSnap;
   try {
     if (firebase.auth().currentUser == null) return false;
-    LoadingPage.updateBar(18);
+    if ($(".pageLoading").hasClass("active")) {
+      LoadingPage.updateBar(18);
+    } else {
+      LoadingPage.updateBar(13.3);
+    }
     LoadingPage.updateText("Downloading data...");
     let userData = await axiosInstance.get("/user");
     userData = userData.data;
@@ -77,14 +81,22 @@ export async function initSnapshot() {
     } else if (userData.lbMemory) {
       snap.lbMemory = userData.lbMemory;
     }
-    LoadingPage.updateBar(30);
+    if ($(".pageLoading").hasClass("active")) {
+      LoadingPage.updateBar(36);
+    } else {
+      LoadingPage.updateBar(26.6);
+    }
     LoadingPage.updateText("Downloading config...");
     let configData = await axiosInstance.get("/config");
     configData = configData.data;
     if (configData) {
       snap.config = configData.config;
     }
-    LoadingPage.updateBar(54);
+    if ($(".pageLoading").hasClass("active")) {
+      LoadingPage.updateBar(54);
+    } else {
+      LoadingPage.updateBar(39.9);
+    }
     LoadingPage.updateText("Downloading tags...");
     let tagsData = await axiosInstance.get("/user/tags");
     snap.tags = tagsData.data;
@@ -97,7 +109,11 @@ export async function initSnapshot() {
         return 0;
       }
     });
-    LoadingPage.updateBar(72);
+    if ($(".pageLoading").hasClass("active")) {
+      LoadingPage.updateBar(72);
+    } else {
+      LoadingPage.updateBar(52.6);
+    }
     LoadingPage.updateText("Downloading presets...");
     let presetsData = await axiosInstance.get("/presets");
     snap.presets = presetsData.data;
@@ -128,6 +144,8 @@ export async function getUserResults() {
     return true;
   } else {
     try {
+      LoadingPage.updateText("Downloading results...");
+      LoadingPage.updateBar(76.7);
       let results = await axiosInstance.get("/results");
       results.data.forEach((result) => {
         if (result.bailedOut === undefined) result.bailedOut = false;

src/js/elements/loading-page.js

@@ -1,11 +1,11 @@
 import * as UI from "./ui";
 
 export function updateBar(percentage) {
-  $(".pageLoading .fill").width(percentage + "%");
+  $(".pageLoading .fill, .pageAccount .fill").width(percentage + "%");
 }
 
 export function updateText(text) {
-  $(".pageLoading .text").text(text);
+  $(".pageLoading .text, .pageAccount .text").text(text);
 }
 
 export function showBar() {
@@ -18,5 +18,13 @@ export function showBar() {
         resolve();
       }
     );
+    UI.swapElements(
+      $(".pageAccount .icon"),
+      $(".pageAccount .barWrapper"),
+      125,
+      () => {
+        resolve();
+      }
+    );
   });
 }

src/sass/account.scss

@@ -81,12 +81,6 @@
     top: 0;
   }
 
-  .preloader {
-    font-size: 2rem;
-    justify-self: center;
-    color: var(--main-color);
-  }
-
   .doublegroup {
     display: grid;
     grid-auto-flow: column;

src/sass/core.scss

@@ -176,7 +176,8 @@ key {
   line-height: 0.7rem;
 }
 
-.pageLoading {
+.pageLoading,
+.pageAccount {
   display: grid;
   justify-content: center;
   .preloader {

static/index.html

@@ -1059,7 +1059,6 @@
               <div class="icon">
                 <i class="fas fa-fw fa-spin fa-circle-notch"></i>
               </div>
-
               <div class="barWrapper hidden">
                 <div class="bar">
                   <div class="fill"></div>
@@ -4355,7 +4354,15 @@
               <i class="fas fa-angle-double-up"></i>
             </div>
             <div class="preloader">
-              <i class="fas fa-fw fa-spin fa-circle-notch"></i>
+              <div class="icon">
+                <i class="fas fa-fw fa-spin fa-circle-notch"></i>
+              </div>
+              <div class="barWrapper hidden">
+                <div class="bar">
+                  <div class="fill"></div>
+                </div>
+                <div class="text">‎</div>
+              </div>
             </div>
             <div class="content hidden">
               <div class="miniResultChartWrapper">