made the loading bars smoooooth

src/js/account.js

@@ -59,9 +59,9 @@ export async function getDataAndInit() {
     return;
   }
   if (UI.getActivePage() == "pageLoading") {
-    LoadingPage.updateBar(90);
+    LoadingPage.updateBar(100);
   } else {
-    LoadingPage.updateBar(65.9);
+    LoadingPage.updateBar(74);
   }
   LoadingPage.updateText("Applying settings...");
   let snap = DB.getSnapshot();
@@ -222,7 +222,7 @@ export async function getDataAndInit() {
   UI.setPageTransition(false);
   console.log("account loading finished");
   if (UI.getActivePage() == "pageLoading") {
-    LoadingPage.updateBar(100);
+    LoadingPage.updateBar(100, true);
     UI.changePage("");
   }
 }
@@ -382,7 +382,7 @@ let totalSecondsFiltered = 0;
 export function update() {
   function cont() {
     LoadingPage.updateText("Displaying stats...");
-    LoadingPage.updateBar(90);
+    LoadingPage.updateBar(100);
     console.log("updating account page");
     ThemeColors.update();
     ChartController.accountHistory.updateColors();
@@ -1011,7 +1011,7 @@ export function update() {
 
     ChartController.accountHistory.update({ duration: 0 });
     ChartController.accountActivity.update({ duration: 0 });
-    LoadingPage.updateBar(100);
+    LoadingPage.updateBar(100, true);
     UI.swapElements(
       $(".pageAccount .preloader"),
       $(".pageAccount .content"),

src/js/db.js

@@ -54,9 +54,9 @@ export async function initSnapshot() {
   try {
     if (firebase.auth().currentUser == null) return false;
     if (UI.getActivePage() == "pageLoading") {
-      LoadingPage.updateBar(18);
+      LoadingPage.updateBar(22.5);
     } else {
-      LoadingPage.updateBar(13.3);
+      LoadingPage.updateBar(16);
     }
     LoadingPage.updateText("Downloading user...");
     let userData = await axiosInstance.get("/user");
@@ -83,9 +83,9 @@ export async function initSnapshot() {
       snap.lbMemory = userData.lbMemory;
     }
     if (UI.getActivePage() == "pageLoading") {
-      LoadingPage.updateBar(36);
+      LoadingPage.updateBar(45);
     } else {
-      LoadingPage.updateBar(26.6);
+      LoadingPage.updateBar(32);
     }
     LoadingPage.updateText("Downloading config...");
     let configData = await axiosInstance.get("/config");
@@ -94,9 +94,9 @@ export async function initSnapshot() {
       snap.config = configData.config;
     }
     if (UI.getActivePage() == "pageLoading") {
-      LoadingPage.updateBar(54);
+      LoadingPage.updateBar(67.5);
     } else {
-      LoadingPage.updateBar(39.9);
+      LoadingPage.updateBar(48);
     }
     LoadingPage.updateText("Downloading tags...");
     let tagsData = await axiosInstance.get("/user/tags");
@@ -111,9 +111,9 @@ export async function initSnapshot() {
       }
     });
     if (UI.getActivePage() == "pageLoading") {
-      LoadingPage.updateBar(72);
+      LoadingPage.updateBar(90);
     } else {
-      LoadingPage.updateBar(52.6);
+      LoadingPage.updateBar(64);
     }
     LoadingPage.updateText("Downloading presets...");
     let presetsData = await axiosInstance.get("/presets");
@@ -146,7 +146,7 @@ export async function getUserResults() {
   } else {
     try {
       LoadingPage.updateText("Downloading results...");
-      LoadingPage.updateBar(76.7);
+      LoadingPage.updateBar(90);
       let results = await axiosInstance.get("/results");
       results.data.forEach((result) => {
         if (result.bailedOut === undefined) result.bailedOut = false;

src/js/elements/loading-page.js

@@ -1,7 +1,15 @@
 import * as UI from "./ui";
 
-export function updateBar(percentage) {
-  $(".pageLoading .fill, .pageAccount .fill").width(percentage + "%");
+export function updateBar(percentage, fast) {
+  const speed = fast ? 100 : 1000;
+  $(".pageLoading .fill, .pageAccount .fill")
+    .stop(true, true)
+    .animate(
+      {
+        width: percentage + "%",
+      },
+      speed
+    );
 }
 
 export function updateText(text) {

src/sass/core.scss

@@ -202,7 +202,7 @@ key {
           width: 0%;
           background: var(--main-color);
           border-radius: var(--roundness);
-          transition: 0.25s;
+          // transition: 1s;
         }
       }
     }