From 66a07781a5ba13e7b8b3c679c06b52c0eca5e409 Mon Sep 17 00:00:00 2001
From: dewanakl <dewanakretarta29@gmail.com>
Date: Fri, 6 Oct 2023 00:11:18 +0700
Subject: [PATCH] feat: fix progress bar

---
 index.html |  8 ++++++--
 js/app.js  | 15 +++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index a35c89ad..fa886aaa 100644
--- a/index.html
+++ b/index.html
@@ -486,8 +486,12 @@ <h1 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu & Riski</h1>
     <!-- Loading page -->
     <div class="loading-page" id="loading" style="opacity: 1;">
         <div class="d-flex justify-content-center align-items-center" style="height: 100vh !important;">
-            <div class="progress w-75" role="progressbar">
-                <div class="progress-bar" id="bar" style="width: 0%">0%</div>
+            <div class="text-center w-75">
+                <img class="img-fluid mb-3" src="./assets/images/icon-192x192.png" alt="icon" style="width: 3.5rem;">
+                <div class="progress" role="progressbar" style="height: 0.5rem;">
+                    <div class="progress-bar" id="bar" style="width: 0%"></div>
+                </div>
+                <small class="mt-1" id="progress-info">Loading asset</small>
             </div>
         </div>
     </div>
diff --git a/js/app.js b/js/app.js
index 39680763..d5aaa76f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,5 +1,4 @@
 const progressBar = (() => {
-    const bar = document.getElementById('bar');
     const assets = document.querySelectorAll('img');
 
     let totalAssets = assets.length;
@@ -8,11 +7,19 @@ const progressBar = (() => {
     const progress = () => {
         const progressPercentage = Math.min((loadedAssets / totalAssets) * 100, 100);
 
-        bar.style.width = progressPercentage.toString() + "%";
-        bar.innerText = `${progressPercentage.toFixed(0)}%`;
+        document.getElementById('bar').style.width = progressPercentage.toString() + "%";
+        document.getElementById('progress-info').innerText = `Loading asset (${loadedAssets}) [${progressPercentage.toFixed(0)}%]`;
 
         if (loadedAssets == totalAssets) {
+            if ('scrollRestoration' in history) {
+                history.scrollRestoration = 'manual';
+            }
+
+            document.body.scrollTop = 0;
+            document.documentElement.scrollTop = 0;
+
             window.scrollTo(0, 0);
+
             tamu();
             opacity('loading');
         }
@@ -823,6 +830,7 @@ const buka = async () => {
     opacity('welcome');
     document.getElementById('tombol-musik').style.display = 'block';
     AOS.init();
+    audio.play();
 
     await confetti({
         origin: { y: 0.8 },
@@ -832,7 +840,6 @@ const buka = async () => {
 
     await login();
     timer();
-    audio.play();
 };
 
 // OK