fix: Loading indicator fixes (#398)

Resolves https://github.com/webrecorder/replayweb.page/issues/397

## Changes

- Uses animated logo when loading
- Show non-animated logo for error and other states where user action is required.
- Only shows progress bar if progress is >0
- Fixes WARC progress bar percentage lagging behind displayed "Loaded"
values
- Fixes "Cancel" not redirecting back to initial view
- Removes extra spacing from logo image file

---------

Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>
Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>

CHANGES.md

@@ -2,7 +2,12 @@
 
 ## CHANGES
 
+v2.3.0
+
+- UI: Add animating spinner for loading, show progress bar only when progress is available
+
 v2.2.5
+
 - Branding: Update Site Links and Branding by @Shrinks99 in https://github.com/webrecorder/replayweb.page/pull/375
 - CI: Bump macos version to 13 and node to 20 in CI by @emma-sg in https://github.com/webrecorder/replayweb.page/pull/386
 - CI: Rename exported `Embed` to `ReplayWebPage`, and export `EmbedReplayEvent` type by @emma-sg in https://github.com/webrecorder/replayweb.page/pull/384

src/appmain.ts

@@ -403,6 +403,7 @@ export class ReplayWebApp extends LitElement {
       @replay-favicons=${this.onFavIcons}
       @update-title=${this.onTitle}
       @coll-loaded=${this.onCollLoaded}
+      @coll-load-cancel=${this.onCollLoadCancel}
       @about-show=${() => (this.showAbout = true)}
     ></wr-item>`;
   }
@@ -691,6 +692,12 @@ export class ReplayWebApp extends LitElement {
     }
   }
 
+  private onCollLoadCancel() {
+    this.sourceUrl = null;
+    this.loadInfo = null;
+    window.history.pushState({}, "", new URL(window.location.href).origin);
+  }
+
   // @ts-expect-error [// TODO: Fix this the next time the file is edited.] - TS7006 - Parameter 'event' implicitly has an 'any' type.
   onTitle(event) {
     if (event.detail.title) {

src/assets/brand/replaywebpage-icon-color-animated.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>
+@keyframes a0_t { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
+</style><path d="M6.807 11.246h-0.001c-0.074 0-0.144-0.033-0.191-0.09c-0.047-0.057-0.067-0.131-0.054-0.204c.338-1.735 1.483-3.206 3.082-3.959c.038-0.018 .083-0.015 .118 .008c.036 .022 .057 .061 .058 .103c.001 .017-0.003 .035-0.011 .05c-0.426 1.035-0.719 2.371-0.81 3.856c-0.007 .132-0.117 .236-0.249 .236Zm7.364-4.091c-0.019-0.047-0.008-0.101 .027-0.138c.037-0.035 .092-0.045 .139-0.025c1.6 .753 2.745 2.224 3.081 3.96c.012 .072-0.008 .146-0.055 .203c-0.047 .056-0.117 .089-0.19 .09l-1.942 .001c-0.132 0-0.242-0.104-0.249-0.236c-0.091-1.485-0.384-2.821-0.811-3.855m3.002 5.591c.074 0 .144 .033 .192 .089c.047 .057 .067 .132 .054 .205c-0.336 1.736-1.481 3.208-3.082 3.96c-0.047 .02-0.102 .01-0.139-0.025c-0.035-0.037-0.045-0.091-0.026-0.138c.426-1.033 .719-2.369 .81-3.856c.008-0.132 .117-0.235 .249-0.235Zm-7.364 4.091c.007 .016 .01 .033 .01 .05c-0.001 .042-0.022 .081-0.057 .104c-0.036 .023-0.08 .027-0.119 .01c-1.599-0.754-2.744-2.225-3.081-3.961c-0.013-0.073 .007-0.147 .054-0.204c.048-0.056 .117-0.088 .191-0.088c.495-0.002 1.488-0.002 1.942-0.002c.132 0 .241 .103 .249 .235c.091 1.487 .384 2.823 .811 3.856m.694-3.825c-0.005-0.069 .019-0.136 .066-0.187c.048-0.05 .114-0.078 .183-0.078l2.477-0.001c.138 .001 .249 .112 .249 .25v.016c-0.107 1.583-0.461 2.962-0.997 3.872c-0.111 .198-0.249 .375-0.414 .531c-0.045 .035-0.109 .035-0.154 0c-0.164-0.155-0.304-0.334-0.414-0.531c-0.536-0.91-0.89-2.289-0.996-3.872m2.975-2.032v.016c0 .138-0.111 .249-0.249 .25h-2.477c-0.138 0-0.25-0.112-0.25-0.25l.001-0.016c.106-1.583 .46-2.961 .996-3.872c.127-0.214 .272-0.408 .414-0.53c.045-0.035 .109-0.035 .154 0c.142 .122 .288 .316 .414 .53c.536 .911 .89 2.289 .997 3.872" fill="#0891b2"/><path d="M23.774 13.333c.09 .05 .14 .149 .128 .25c-0.778 5.876-5.811 10.417-11.897 10.417c-6.114 0-11.165-4.581-11.907-10.495l-0.001-0.028c.001-0.137 .111-0.247 .248-0.248c.044 0 .087 .012 .125 .035c.54 .312 1.438 .835 1.768 1.028c.078 .045 .174 .045 .252-0.001l1.777-1.044c.071-0.042 .157-0.046 .231-0.012c.075 .035 .128 .103 .142 .184c.691 3.524 3.774 6.069 7.365 6.081c3.563-0.011 6.63-2.518 7.351-6.007c.014-0.073 .061-0.136 .126-0.171l2.042-1.103c.075-0.041 .165-0.04 .24 .001Zm-23.548-2.666c-0.09-0.049-0.141-0.148-0.128-0.25c.778-5.876 5.811-10.417 11.897-10.417c6.114 0 11.165 4.581 11.907 10.495l.001 .028c-0.001 .137-0.111 .247-0.248 .248c-0.044 0-0.087-0.012-0.125-0.035c-0.59-0.341-1.179-0.684-1.768-1.028c-0.078-0.045-0.174-0.045-0.252 .001l-1.777 1.044c-0.071 .042-0.157 .046-0.231 .012c-0.075-0.035-0.128-0.103-0.142-0.184c-0.691-3.524-3.774-6.069-7.365-6.081c-3.563 .011-6.63 2.518-7.351 6.007c-0.014 .073-0.061 .136-0.126 .171l-2.042 1.103c-0.075 .041-0.166 .041-0.241-0.001Z" fill="#4d7c0f" style="animation: 3s linear infinite both a0_t;transform-origin:center;"/></svg>

src/assets/brand/replaywebpage-icon-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 24 24"><clipPath id="a"><path d="M0 0h23.04v23.04H0z"/></clipPath><g clip-path="url(#a)"><path d="M6.544 10.796a.239.239 0 0 1-.236-.282 5.32 5.32 0 0 1 2.959-3.801.118.118 0 0 1 .158.155c-.409.993-.69 2.276-.777 3.702a.24.24 0 0 1-.239.226zm7.07-3.927a.12.12 0 0 1 .026-.133.12.12 0 0 1 .133-.024 5.32 5.32 0 0 1 2.958 3.802.24.24 0 0 1-.235.281l-1.865.001a.24.24 0 0 1-.239-.226c-.087-1.426-.368-2.709-.778-3.701m2.882 5.367c.071 0 .138.032.184.086a.24.24 0 0 1 .052.196 5.32 5.32 0 0 1-2.959 3.802.12.12 0 0 1-.133-.024.12.12 0 0 1-.025-.132c.409-.992.69-2.275.777-3.702a.24.24 0 0 1 .239-.226zm-7.07 3.928a.12.12 0 0 1-.159.157 5.32 5.32 0 0 1-2.958-3.803.24.24 0 0 1 .052-.195.24.24 0 0 1 .183-.085c.475-.002 1.429-.002 1.865-.002a.24.24 0 0 1 .239.226c.087 1.427.368 2.71.778 3.702m.666-3.672a.24.24 0 0 1 .064-.18.24.24 0 0 1 .175-.075l2.378-.001a.24.24 0 0 1 .239.256c-.102 1.519-.442 2.843-.957 3.717a2.1 2.1 0 0 1-.397.509.12.12 0 0 1-.148 0 2.1 2.1 0 0 1-.397-.509c-.515-.874-.855-2.198-.957-3.717m2.856-1.951a.24.24 0 0 1-.239.255h-2.378a.24.24 0 0 1-.239-.255c.102-1.52.442-2.843.957-3.717.121-.206.261-.392.397-.509a.12.12 0 0 1 .148 0c.136.117.276.303.397.509.515.874.855 2.197.957 3.717" style="fill:#0891b2"/><path d="M22.833 12.8a.24.24 0 0 1 .122.24c-.746 5.641-5.578 10-11.421 10-5.869 0-10.718-4.398-11.43-10.075a.238.238 0 0 1 .357-.232c.518.3 1.38.802 1.697.987a.24.24 0 0 0 .242-.001l1.706-1.002a.24.24 0 0 1 .358.165 7.205 7.205 0 0 0 7.07 5.838 7.21 7.21 0 0 0 7.057-5.767.24.24 0 0 1 .121-.164l1.961-1.059a.24.24 0 0 1 .23.001zM.226 10.24A.24.24 0 0 1 .104 10C.85 4.359 5.682 0 11.525 0c5.869 0 10.718 4.398 11.43 10.075a.238.238 0 0 1-.357.232c-.518-.3-1.38-.802-1.697-.987a.24.24 0 0 0-.242.001l-1.706 1.002a.24.24 0 0 1-.358-.165 7.205 7.205 0 0 0-7.07-5.838 7.21 7.21 0 0 0-7.057 5.767.24.24 0 0 1-.121.164L2.386 11.31a.24.24 0 0 1-.231-.001z" style="fill:#4d7c0f"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24"><path d="M6.807 11.246h-.001a.25.25 0 0 1-.245-.294 5.55 5.55 0 0 1 3.082-3.959.124.124 0 0 1 .176.111.1.1 0 0 1-.011.05c-.426 1.035-.719 2.371-.81 3.856a.25.25 0 0 1-.249.236zm7.364-4.091a.13.13 0 0 1 .027-.138.13.13 0 0 1 .139-.025 5.54 5.54 0 0 1 3.081 3.96.252.252 0 0 1-.245.293l-1.942.001a.25.25 0 0 1-.249-.236c-.091-1.485-.384-2.821-.811-3.855m3.002 5.591c.074 0 .144.033.192.089a.25.25 0 0 1 .054.205A5.54 5.54 0 0 1 14.337 17a.13.13 0 0 1-.139-.025.13.13 0 0 1-.026-.138c.426-1.033.719-2.369.81-3.856a.25.25 0 0 1 .249-.235zm-7.364 4.091q.01.024.01.05a.126.126 0 0 1-.176.114 5.55 5.55 0 0 1-3.081-3.961.25.25 0 0 1 .054-.204.25.25 0 0 1 .191-.088c.495-.002 1.488-.002 1.942-.002a.25.25 0 0 1 .249.235c.091 1.487.384 2.823.811 3.856m.694-3.825a.25.25 0 0 1 .066-.187.25.25 0 0 1 .183-.078l2.477-.001a.25.25 0 0 1 .249.25v.016c-.107 1.583-.461 2.962-.997 3.872q-.166.297-.414.531a.126.126 0 0 1-.154 0 2.2 2.2 0 0 1-.414-.531c-.536-.91-.89-2.289-.996-3.872m2.975-2.032v.016a.25.25 0 0 1-.249.25h-2.477a.25.25 0 0 1-.25-.25l.001-.016c.106-1.583.46-2.961.996-3.872.127-.214.272-.408.414-.53a.126.126 0 0 1 .154 0c.142.122.288.316.414.53.536.911.89 2.289.997 3.872" style="fill:#0891b2"/><path d="M23.774 13.333c.09.05.14.149.128.25C23.124 19.459 18.091 24 12.005 24 5.891 24 .84 19.419.098 13.505l-.001-.028a.25.25 0 0 1 .248-.248.24.24 0 0 1 .125.035c.54.312 1.438.835 1.768 1.028a.25.25 0 0 0 .252-.001l1.777-1.044a.25.25 0 0 1 .373.172 7.53 7.53 0 0 0 7.365 6.081 7.53 7.53 0 0 0 7.351-6.007.25.25 0 0 1 .126-.171l2.042-1.103a.25.25 0 0 1 .24.001zM.226 10.667a.25.25 0 0 1-.128-.25C.876 4.541 5.909 0 11.995 0c6.114 0 11.165 4.581 11.907 10.495l.001.028a.25.25 0 0 1-.248.248.24.24 0 0 1-.125-.035 516 516 0 0 1-1.768-1.028.25.25 0 0 0-.252.001l-1.777 1.044a.25.25 0 0 1-.373-.172A7.53 7.53 0 0 0 11.995 4.5a7.53 7.53 0 0 0-7.351 6.007.25.25 0 0 1-.126.171l-2.042 1.103a.25.25 0 0 1-.241-.001z" style="fill:#4d7c0f"/></svg>

src/loader.ts

@@ -1,18 +1,36 @@
-import { LitElement, html, css, type PropertyValues } from "lit";
+import { LitElement, html, css, type PropertyValues, nothing } from "lit";
 import { wrapCss } from "./misc";
 import rwpLogo from "~assets/brand/replaywebpage-icon-color.svg";
+import rwpLogoAnimated from "~assets/brand/replaywebpage-icon-color-animated.svg";
 
 import prettyBytes from "pretty-bytes";
 
 import { parseURLSchemeHostPath } from "./pageutils";
 import { property } from "lit/decorators.js";
 import type { LoadInfo } from "./item";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 // ===========================================================================
+/**
+ * @fires coll-load-cancel
+ */
+type LoadingState =
+  | "started"
+  | "waiting"
+  | "googledrive"
+  | "errored"
+  | "permission_needed";
+
+const NO_ANIM_STATES: LoadingState[] = [
+  "errored",
+  "googledrive",
+  "permission_needed",
+];
+
 class Loader extends LitElement {
   @property({ type: String }) sourceUrl?: string;
   @property({ type: Object }) loadInfo: LoadInfo | null = null;
-  @property({ type: String }) state = "waiting";
+  @property({ type: String }) state: LoadingState = "waiting";
   @property({ type: Number }) progress = 0;
   @property({ type: Number }) percent = 0;
   @property({ type: Number }) currentSize = 0;
@@ -259,7 +277,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
     }
   }
 
-  onCancel() {
+  async onCancel() {
     if (!this.worker) {
       return;
     }
@@ -268,6 +286,16 @@ You can select a file to upload from the main page by clicking the 'Choose File.
 
     if (!this.noWebWorker) {
       this.worker.postMessage(msg);
+
+      await this.updateComplete;
+
+      this.dispatchEvent(
+        new CustomEvent("coll-load-cancel", {
+          bubbles: true,
+          composed: true,
+        }),
+      );
+
       return;
     }
 
@@ -339,7 +367,9 @@ You can select a file to upload from the main page by clicking the 'Choose File.
           <fa-icon
             size="5rem"
             style="margin-bottom: 1rem;"
-            .svg=${rwpLogo}
+            .svg=${NO_ANIM_STATES.includes(this.state)
+              ? rwpLogo
+              : rwpLogoAnimated}
             aria-label="ReplayWeb.page Logo"
             role="img"
           ></fa-icon>
@@ -368,26 +398,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
 
       case "started":
         return html` <div class="progress-div">
-          <progress
+          ${!this.currentSize ? nothing : this.renderProgressBar()}
-            id="progress"
-            class="progress is-primary is-large"
-            value="${this.percent}"
-            max="100"
-          ></progress>
-          <label class="progress-label" for="progress">${this.percent}%</label>
-
-          ${this.currentSize && this.totalSize
-            ? html` <div class="loaded-prog">
-                Loaded
-                <b>${prettyBytes(this.currentSize)}</b>
-                of
-
-                <b>${prettyBytes(this.totalSize)}</b>
-
-                ${this.extraMsg &&
-                html` <p class="extra-msg">(${this.extraMsg})</p> `}
-              </div>`
-            : html``}
           ${!this.embed
             ? html` <button @click="${this.onCancel}" class="button is-danger">
                 Cancel
@@ -426,13 +437,49 @@ You can select a file to upload from the main page by clicking the 'Choose File.
 
       case "waiting":
       default:
-        return html`<progress
+        return html``;
-          class="progress is-primary is-large"
-          style="max-width: 400px"
-        ></progress>`;
     }
   }
 
+  private renderProgressBar() {
+    // Calculate percentage based on currentSize and totalSize
+    // if data is available before actual percent
+    const percent =
+      this.currentSize && this.totalSize
+        ? Math.max(this.percent, (this.currentSize / this.totalSize) * 100)
+        : this.percent;
+    // Round up <1 percentages
+    const displayPercent = percent ? Math.max(percent, 1) : undefined;
+
+    return html`
+      <progress
+        id="progress"
+        class="progress is-primary is-large"
+        value=${ifDefined(displayPercent)}
+        max="100"
+      ></progress>
+      ${displayPercent
+        ? html`
+            <label class="progress-label" for="progress"
+              >${displayPercent}%</label
+            >
+          `
+        : nothing}
+      ${this.currentSize && this.totalSize
+        ? html` <div class="loaded-prog">
+            Loaded
+            <b>${prettyBytes(this.currentSize)}</b>
+            of
+
+            <b>${prettyBytes(this.totalSize)}</b>
+
+            ${this.extraMsg &&
+            html` <p class="extra-msg">(${this.extraMsg})</p> `}
+          </div>`
+        : html``}
+    `;
+  }
+
   async onAskPermission() {
     const result = await this.fileHandle?.requestPermission({
       mode: "read",