feat(ui): let the loading screen speak in the visitor's words and match the desktop logo size

apps/host/index.html

@@ -260,7 +260,7 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
         <div id="app">
             <div class="loading">
                 <div class="loading-logo" id="loading-logo">
-                    <svg width="52" height="52" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <svg width="120" height="120" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path class="loading-petal" d="M31.0155 57.7181C14.6547 76.7768 14.2233 103.306 30.0862 116.92C45.9492 130.566 72.0667 126.15 88.4607 107.058C104.821 87.9995 105.253 61.4701 89.3899 47.8567C83.1841 42.511 75.3522 39.9543 67.1884 39.9543C54.5113 39.9543 40.9713 46.1302 31.0155 57.7181Z"/>
                         <path class="loading-petal" d="M26.2694 156.332C13.9574 170.941 19.3003 195.744 38.2164 211.715C57.1326 227.686 82.4868 228.815 94.7989 214.205C107.111 199.596 101.768 174.793 82.8518 158.822C72.8296 150.355 61.0153 146.072 50.2962 146.072C40.7718 146.072 32.077 149.459 26.3026 156.332"/>
                         <path class="loading-petal" d="M137.343 209.789C115.142 216.795 99.8429 231.072 103.161 241.664C106.513 252.256 127.221 255.178 149.423 248.139C171.625 241.133 186.923 226.856 183.605 216.264C181.481 209.59 172.454 205.938 160.507 205.938C153.505 205.938 145.54 207.166 137.343 209.756"/>
@@ -276,7 +276,12 @@ <h2 id="auth-modal-title">Login with Polkadot Mobile</h2>
                     <span class="loading-progress-pct" id="loading-progress-pct">0%</span>
                 </div>
                 <div class="loading-text" id="loading-text">
-                    <p id="status" aria-live="polite">Reaching out</p>
+                    <!-- The visible line is typed a character at a time, which
+                         would make a live region announce every partial string,
+                         so the announcement is split into its own hidden
+                         element that only ever receives whole sentences. -->
+                    <p id="status" aria-hidden="true">Reaching out</p>
+                    <p class="sr-only" id="status-sr" aria-live="polite"></p>
                     <p class="loading-hint" id="loading-hint"></p>
                 </div>
             </div>

apps/host/src/main.ts

@@ -25,7 +25,8 @@ import {
   captureException,
 } from "@dotli/metrics/sentry";
 import {
-  showStatus,
+  trackStatus,
+  setLoadingDomain,
   showError,
   showNoContentError,
   showLanding,
@@ -1160,12 +1161,44 @@ async function main(): Promise<void> {
   // peers) cap at the band top and let the sheen carry motion rather than
   // inflating the pace. Both smoldot backends share one model. See
   // `advancePhase` mapping below.
+  // The label names the step for us. What the visitor reads is the stage's
+  // copy, which says the same thing in words they can act on.
   const smoldotPhases = (startLabel: string): LoadingPhase[] => [
-    { label: startLabel, base: 2, target: 6, expectedMs: 650 },
-    { label: "Adding relay chain", base: 6, target: 10, expectedMs: 120 },
-    { label: "Syncing Asset Hub", base: 10, target: 55, expectedMs: 6500 },
-    { label: "Resolving", base: 55, target: 62, expectedMs: 1200 },
-    { label: "Fetching content", base: 62, target: 95, expectedMs: 10000 },
+    {
+      label: startLabel,
+      base: 2,
+      target: 6,
+      expectedMs: 650,
+      stage: "starting",
+    },
+    {
+      label: "Adding relay chain",
+      base: 6,
+      target: 10,
+      expectedMs: 120,
+      stage: "relay",
+    },
+    {
+      label: "Syncing Asset Hub",
+      base: 10,
+      target: 55,
+      expectedMs: 6500,
+      stage: "assetHub",
+    },
+    {
+      label: "Resolving",
+      base: 55,
+      target: 62,
+      expectedMs: 1200,
+      stage: "resolving",
+    },
+    {
+      label: "Fetching content",
+      base: 62,
+      target: 95,
+      expectedMs: 10000,
+      stage: "content",
+    },
   ];
   if (chainBackend === "smoldot-shared-worker") {
     initPhases(smoldotPhases("Starting Worker"));
@@ -1175,18 +1208,37 @@ async function main(): Promise<void> {
     // Gateway path resolves over RPC with no smoldot sync, then fetches
     // content the same way every backend does.
     initPhases([
-      { label: "Connecting", base: 5, target: 50, expectedMs: 1200 },
-      { label: "Resolving", base: 50, target: 62, expectedMs: 1200 },
-      { label: "Fetching content", base: 62, target: 95, expectedMs: 10000 },
+      {
+        label: "Connecting",
+        base: 5,
+        target: 50,
+        expectedMs: 1200,
+        stage: "relay",
+      },
+      {
+        label: "Resolving",
+        base: 50,
+        target: 62,
+        expectedMs: 1200,
+        stage: "resolving",
+      },
+      {
+        label: "Fetching content",
+        base: 62,
+        target: 95,
+        expectedMs: 10000,
+        stage: "content",
+      },
     ]);
   }
   // Content fetch (bitswap/IPFS) runs in the sandbox after the CID resolves and
   // was previously unrepresented, so the bar sat parked while a 20s+ fetch ran.
   // It is always the last phase; advance to it just before handing off to the
   // sandbox render.
   const contentFetchPhase = chainBackend === "rpc-gateway" ? 2 : 4;
+  setLoadingDomain(label);
   advancePhase(0);
-  showStatus(`Resolving ${withActiveTld(label)}`);
+  trackStatus(`Resolving ${withActiveTld(label)}`);
 
   try {
     const cachedCid = cacheSettings.skipCidCache
@@ -1320,7 +1372,7 @@ async function main(): Promise<void> {
             advancePhase(3);
           }
           emitPhase(msg, phase ?? "progress");
-          showStatus(msg);
+          trackStatus(msg);
         };
         cid = await resolveDotNameRemote(`app.${label}`, onResolveProgress);
         if (cid === null) {
@@ -1340,7 +1392,7 @@ async function main(): Promise<void> {
         await import("@dotli/resolver/rpc-resolve");
       const onResolveProgress = (msg: string): void => {
         emitPhase(msg, "progress");
-        showStatus(msg);
+        trackStatus(msg);
       };
       cid = await resolveDotNameViaRpc(`app.${label}`, onResolveProgress);
       if (cid === null) {

packages/ui/src/styles/base.css

@@ -148,9 +148,24 @@ body {
   line-height: 1.3;
   text-align: center;
   width: 100%;
-  white-space: nowrap;
+  /* The explanatory lines run past one line at this width, and clipping them
+     to an ellipsis would defeat the point of showing them. Two lines are
+     reserved so the bar above does not shift as a sentence wraps. */
+  text-wrap: balance;
+  min-height: 2.6em;
+}
+/* Off-screen but still announced. `display: none` and `visibility: hidden`
+   would take it out of the accessibility tree too. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }
 /* Slow-step hint (shown below status when a step exceeds its threshold) */
 .loading-hint {