fix(player): drop the empty transition label from the Loading assets card

The Loading assets card reuses the shader-transition panel, and resetting it
hid the transition-frame row but not the transition row, so a bare
"transition" label stayed under the progress bar. Each progress row now shows
only while it has a value, which also covers a shader load that reports no
count yet.

Author: miguel-heygen

packages/player/src/shader-loader-element.ts

@@ -15,6 +15,7 @@ export interface ShaderLoaderElements {
   title: HTMLSpanElement;
   detail: HTMLDivElement;
   transitionValue: HTMLSpanElement;
+  transitionRow: HTMLDivElement;
   frameLabel: HTMLSpanElement;
   frameValue: HTMLSpanElement;
   frameRow: HTMLDivElement;
@@ -119,6 +120,7 @@ export function createShaderLoader(): ShaderLoaderElements {
     title: titleText,
     detail,
     transitionValue: transitionStatus.value,
+    transitionRow: transitionStatus.row,
     frameLabel: frameStatus.label,
     frameValue: frameStatus.value,
     frameRow: frameStatus.row,

packages/player/src/shader-loader-state.test.ts

@@ -0,0 +1,49 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from "vitest";
+import { createShaderLoader } from "./shader-loader-element.js";
+import { ShaderLoaderState } from "./shader-loader-state.js";
+
+function loader() {
+  const elements = createShaderLoader();
+  const visibleLabels = () =>
+    [...elements.root.querySelectorAll<HTMLElement>(".hfp-shader-loader-row")]
+      .filter((row) => row.style.visibility !== "hidden")
+      .map((row) => row.querySelector(".hfp-shader-loader-label")?.textContent);
+  return { state: new ShaderLoaderState(elements), visibleLabels };
+}
+
+describe("shader loader progress rows", () => {
+  it("shows no progress rows on the Loading assets card", () => {
+    const { state, visibleLabels } = loader();
+    state.showAssetsLoading();
+    expect(visibleLabels()).toEqual([]);
+  });
+
+  it("hides the transition rows a shader load left behind when assets start loading", () => {
+    const { state, visibleLabels } = loader();
+    state.update(
+      {
+        loading: true,
+        ready: false,
+        currentTransition: 1,
+        transitionTotal: 3,
+        transitionFrame: 2,
+        transitionFrames: 30,
+      },
+      "player",
+    );
+    expect(visibleLabels()).toEqual(["transition", "rendering transition frames"]);
+
+    state.showAssetsLoading();
+    expect(visibleLabels()).toEqual([]);
+  });
+
+  it("shows the transition row only once it has a count", () => {
+    const { state, visibleLabels } = loader();
+    state.update({ loading: true, ready: false }, "player");
+    expect(visibleLabels()).toEqual([]);
+
+    state.update({ loading: true, ready: false, progress: 2, total: 5 }, "player");
+    expect(visibleLabels()).toEqual(["transition"]);
+  });
+});

packages/player/src/shader-loader-state.ts

@@ -14,6 +14,12 @@ import type { ShaderLoaderElements } from "./shader-loader-element.js";
 
 const HIDE_TRANSITION_MS = 420;
 
+/** A progress row shows only while it has a value, so no bare label is left on the card. */
+function setRowValue(row: HTMLElement, value: HTMLElement, text: string): void {
+  value.textContent = text;
+  row.style.visibility = text ? "visible" : "hidden";
+}
+
 export class ShaderLoaderState {
   private readonly _el: ShaderLoaderElements;
   private _hideTimeout: ReturnType<typeof setTimeout> | null = null;
@@ -65,9 +71,8 @@ export class ShaderLoaderState {
     this._el.root.classList.remove("hfp-visible", "hfp-hiding");
     this._flushHidden();
     this._el.fill.style.transform = "scaleX(0)";
-    this._el.transitionValue.textContent = "";
-    this._el.frameValue.textContent = "";
-    this._el.frameRow.style.visibility = "hidden";
+    setRowValue(this._el.transitionRow, this._el.transitionValue, "");
+    setRowValue(this._el.frameRow, this._el.frameValue, "");
   }
 
   // fallow-ignore-next-line unused-class-member, complexity
@@ -107,7 +112,7 @@ export class ShaderLoaderState {
     this._el.fill.style.transform = `scaleX(${ratio})`;
 
     // fallow-ignore-next-line code-duplication
-    this._el.transitionValue.textContent =
+    const transitionValue =
       status.currentTransition !== undefined && status.transitionTotal !== undefined
         ? `${status.currentTransition}/${status.transitionTotal}`
         : total > 0
@@ -126,8 +131,8 @@ export class ShaderLoaderState {
           ? "finalizing transition frames"
           : "rendering transition frames";
 
-    this._el.frameValue.textContent = frameValue;
-    this._el.frameRow.style.visibility = frameValue ? "visible" : "hidden";
+    setRowValue(this._el.transitionRow, this._el.transitionValue, transitionValue);
+    setRowValue(this._el.frameRow, this._el.frameValue, frameValue);
     this._el.root.setAttribute("aria-valuenow", String(Math.round(ratio * 100)));
     this.show();
   }