feat(tiny-progress): support delay (#88)

packages/tiny-progress/src/core.ts

@@ -1,4 +1,6 @@
 export class TinyProgress {
+  public delay = 80;
+
   public styles = {
     base: {
       position: "fixed",
@@ -38,10 +40,17 @@ export class TinyProgress {
     },
   } satisfies Record<string, Partial<CSSStyleDeclaration>>;
 
-  public el: HTMLElement | undefined;
+  private el: HTMLElement | undefined;
+
+  private timeout: ReturnType<typeof setTimeout> | undefined;
 
   start() {
-    this.el?.remove();
+    if (this.el) {
+      this.el.remove();
+    }
+    if (typeof this.timeout !== "undefined") {
+      clearTimeout(this.timeout);
+    }
     this.el = document.body.appendChild(document.createElement("div"));
     const el = this.el;
     Object.assign(
@@ -50,13 +59,22 @@ export class TinyProgress {
       this.styles.enter,
       this.styles.enterFrom
     );
-    requestAnimationFrame(() => {
+    this.timeout = setTimeout(() => {
+      this.timeout = undefined;
       Object.assign(el.style, this.styles.enterTo);
-    });
+    }, this.delay);
   }
 
   finish() {
-    if (!this.el) return;
+    if (!this.el) {
+      return;
+    }
+    if (typeof this.timeout !== "undefined") {
+      clearTimeout(this.timeout);
+      this.timeout = undefined;
+      this.el.remove();
+      return;
+    }
     const el = this.el;
     Object.assign(el.style, this.styles.leave, this.styles.leaveFrom);
     requestAnimationFrame(() => {