feat: progress bar in preload ui

lideming · Jan 17, 2024 · 94976ea · 94976ea
1 parent 570a4b5
commit 94976ea
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -51,6 +51,21 @@
       #preload-infos p.error {
         color: red;
       }
+
+      #preload-progress-bar {
+        width: 180px;
+        height: 4px;
+        background: #ccc;
+        position: relative;
+        margin: 0 auto 10px;
+      }
+
+      #preload-progress-bar-fill {
+        width: 5%;
+        height: 100%;
+        background: gray;
+        transition: width .3s;
+      }
     </style>
     <!-- Preload script which waits for main script loading and displays status -->
     <script>
@@ -146,7 +161,12 @@
   <body>
     <div id="preload-overlay" lang="en">
       <h1>MusicCloud</h1>
-      <div id="preload-infos" style="min-height: 100px"></div>
+      <div id="preload-progress-bar">
+        <div id="preload-progress-bar-fill" />
+      </div>
+      <div id="preload-infos" style="min-height: 100px">
+        <p class="info">Loading app...</p>
+      </div>
       <noscript>
         <p>JavaScript is required to run this application.</p>
       </noscript>

diff --git a/src/Infra/UI.ts b/src/Infra/UI.ts
@@ -1,7 +1,6 @@
 // file: UI.ts
 
 import {
-  ListView,
   ListViewItem,
   Dialog,
   ToastsContainer,
@@ -13,15 +12,10 @@ import {
   ItemActiveHelper,
   dragManager,
   ContextMenu,
-  buildDOM,
   fadeout,
-  formatDuration,
-  listenPointerEvents,
   numLimit,
-  replaceChild,
   toggleClass,
   mountView,
-  unmountView,
 } from "./viewlib";
 import * as views from "./ui-views";
 import { MainContainer } from "./ui-views";
@@ -52,18 +46,16 @@ mountView(document.body, bottomBar);
 import { router } from "./Router";
 import {
   SettingItem,
-  BuildDomExpr,
   Func,
   Callbacks,
   Timer,
-  InputStateTracker,
   Toast,
-  ToolTip,
+  clearChildren,
 } from "./utils";
 import { I18n, i18n, I } from "../I18n/I18n";
 import { Track } from "../Track/Track";
 import { user } from "../API/User";
-import { playerCore, playingLoopModes } from "../Player/PlayerCore";
+import { playerCore } from "../Player/PlayerCore";
 import { uploads } from "../Track/Uploads";
 import { api } from "../API/Api";
 
@@ -154,14 +146,23 @@ export const ui = new (class {
   }
   preload = new (class {
     domInfos = document.getElementById("preload-infos");
+    domProgress = document.getElementById('preload-progress-bar-fill');
     jsok() {
       window["preload"]?.jsOk();
+      if (this.domInfos) {
+        clearChildren(this.domInfos);
+      }
     }
     log(text: string, type: "info" | "error") {
       const p = new TextView({ tag: `p.${type}`, text });
       if (this.domInfos) mountView(this.domInfos, p);
       return p;
     }
+    progress(value: number) {
+      if (this.domProgress) {
+        this.domProgress.style.width = `${value * 100}%`;
+      }
+    }
     end() {
       setTimeout(() => {
         ui.mainContainer.dom.classList.remove("no-transition");

diff --git a/src/main.ts b/src/main.ts
@@ -85,13 +85,21 @@ function init() {
 async function waitInitialLoading() {
   try {
     ui.preload.jsok();
+    ui.preload.progress(0.33);
     const stateText = ui.preload.log("Logging in...", "info");
     await Promise.race([
       webfx.sleepAsync(1000),
       user
         .waitLogin(false)
-        .then(() => stateText.text = "Loading plugins...")
-        .then(() => plugins.waitPluginsLoading()),
+        .then(() => {
+          stateText.text = "Loading plugins...";
+          ui.preload.progress(0.66);
+        })
+        .then(() => plugins.waitPluginsLoading())
+        .then(() => {
+          stateText.text = "";
+          ui.preload.progress(1);
+        }),
     ]);
   } finally {
     ui.preload.end();