Issue #3488464: Moved progress bar delay custom prop to delay component:

This also required altering the hide and finish methods/logic to return Promises so external calls can know when they've finished doing async stuff. It's still a bit messy but hopefully less so than before.

Issue #3488464: Moved progress bar delay custom prop to delay component:
793f8876 · ambient.impact · 5aca822e · 793f8876 · 793f8876
Commit 793f8876 authored 5 months ago by ambient.impact
--- a/components/progress-bar-delay/progress-bar-delay.js
+++ b/components/progress-bar-delay/progress-bar-delay.js
@@ -12,6 +12,29 @@
  'use strict';
+  /**
+   * CSS custom property base name.
+   *
+   * @type {String}
+   */
+  const customPropertyBase = '--refreshless-progress-bar';
+  /**
+   * Name of the CSS custom property containing the progress bar delay.
+   *
+   * The value will be a time in ms.
+   *
+   * @type {String}
+   */
+  const delayCustomProperty = `${customPropertyBase}-delay`;
+  /**
+   * The <html> element.
+   *
+   * @type {HTMLHtmlElement}
+   */
+  const html = document.documentElement;
  /**
   * Represents a progress bar delay wrapper.
   */
@@ -53,6 +76,26 @@
    }
+    /**
+     * Install the progress bar in the document and set various properties.
+     */
+    install() {
+      html.style.setProperty(
+        delayCustomProperty, `${this.#delay}ms`,
+      );
+    }
+    /**
+     * Uninstall the progress bar from the document and remove properties.
+     */
+    uninstall() {
+      html.style.removeProperty(delayCustomProperty);
+    }
    /**
     * Start the timeout to show the progress bar.
     *
@@ -68,11 +111,15 @@
        window.clearTimeout(timeoutId);
      }
-      this.#progressBar.setValue(0);
+      this.install();
-      return window.setTimeout(
+      return window.setTimeout(async () => {
-        () => { this.#progressBar.show() }, this.#delay,
-      );
+        await this.#progressBar.setValue(0);
+        this.#progressBar.show();
+      }, this.#delay);
    }
@@ -89,13 +136,11 @@
        return timeoutId;
      }
-      this.#progressBar.setValue(1);
-      this.#progressBar.hide();
      window.clearTimeout(timeoutId);
-      timeoutId = null
+      timeoutId = null;
+      this.#progressBar.finish().then(() => this.uninstall());
      return timeoutId;

--- a/components/progress-bar/progress-bar.js
+++ b/components/progress-bar/progress-bar.js
@@ -45,15 +45,6 @@
   */
  const durationCustomProperty = `${customPropertyBase}-transition-duration`;
-  /**
-   * Name of the CSS custom property containing the progress bar delay.
-   *
-   * The value will be a time in ms.
-   *
-   * @type {String}
-   */
-  const delayCustomProperty = `${customPropertyBase}-delay`;
  /**
   * Name of the CSS custom property containing the current progress bar value.
   *
@@ -142,23 +133,29 @@
    /**
     * Hide the progress bar if visible and not already hiding.
+     *
+     * @return {Promise}
     */
    hide() {
      if (!(this.#visible === true && this.#hiding === false)) {
-        return;
+        return Promise.resolve();
      }
      this.#hiding = true;
      this.stopTrickling();
-      this.#transitionOut().then(() => {
+      return new Promise(async (resolve, reject) => {
+        await this.#transitionOut();
        this.uninstall();
        this.#visible = false;
        this.#hiding = false;
+        resolve();
      });
    }
@@ -224,7 +221,7 @@
      this.#value = value;
-      this.refresh();
+      return this.refresh();
    }
@@ -237,10 +234,6 @@
        durationCustomProperty, `${this.#transitionDuration}ms`,
      );
-      html.style.setProperty(
-        delayCustomProperty, `${Turbo.session.progressBarDelay}ms`,
-      );
      html.style.setProperty(valueCustomProperty, 0);
      this.#setInactive();
@@ -266,7 +259,6 @@
        this.#element.remove();
      }
-      html.style.removeProperty(delayCustomProperty);
      html.style.removeProperty(durationCustomProperty);
      html.style.removeProperty(valueCustomProperty);
@@ -319,16 +311,12 @@
    }
    /**
-     * Finish/complete the progress bar to 100% and start hiding it.
+     * Finish/complete the progress bar by setting to 100% and start hiding it.
     *
-     * @return {[type]} [description]
+     * @return {Promise}
     */
    finish() {
+      return this.setValue(1).then(() => this.hide());
-      this.setValue(1);
-      this.hide();
    }
    /**