fix: hide the progress bar on the case of backing forward

hbstack · Jun 29, 2024 · ddc71d5 · ddc71d5
1 parent 4d7b504
commit ddc71d5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/assets/hb/modules/progress-bar/js/index.ts b/assets/hb/modules/progress-bar/js/index.ts
@@ -3,6 +3,10 @@ import Progress from "./progress";
 (() => {
     const progress = new Progress()
 
+    window.addEventListener('pagehide', () => {
+        progress.hide()
+    })
+
     window.addEventListener('beforeunload', () => {
         progress.show()
     })

diff --git a/assets/hb/modules/progress-bar/js/progress.ts b/assets/hb/modules/progress-bar/js/progress.ts
@@ -36,11 +36,18 @@ export default class Progress {
         this.bar = bar
     }
 
+    private timer = 0
+
     show() {
         this.ele.classList.remove('d-none')
-        setInterval(() => {
+        this.timer = setInterval(() => {
             this.width += this.step
             this.bar.style.width = `${this.width}%`
         }, this.interval)
     }
+
+    hide() {
+        this.ele.classList.add('d-none')
+        clearInterval(this.timer)
+    }
 }