Add asset file download indicator to the loading screen.

This provides visual feedback to the user while loading large models.

PiperOrigin-RevId: 918708877
Change-Id: I77ea475cce6d9718e6cf8b33cb72b3f524a6ee63

src/experimental/studio/emscripten.cc

@@ -71,8 +71,17 @@ class AssetRegistry {
 // The caller is responsible for freeing the buffer. Returns 0 on failure.
 EM_ASYNC_JS(int, FetchUrl,
             (const char* url, char** out_data, std::int32_t* out_size), {
+              const urlStr = UTF8ToString(url);
+              const filename = urlStr.split('/').pop() || urlStr;
+              const dlEl = document.getElementById('loadingDownload');
+              const dlFileEl = document.getElementById('loadingDownloadFile');
+              if (dlEl) {
+                dlEl.style.display = 'block';
+              }
+              if (dlFileEl) {
+                dlFileEl.textContent = filename + '\u2026';
+              }
               try {
-                const urlStr = UTF8ToString(url);
                 const response = await fetch(urlStr);
                 if (!response.ok) {
                   console.error('Fetch failed: ' + response.status + ' ' +
@@ -89,6 +98,13 @@ EM_ASYNC_JS(int, FetchUrl,
               } catch (e) {
                 console.error('Fetch error:', e);
                 return 0;
+              } finally {
+                if (dlEl) {
+                  dlEl.style.display = 'none';
+                }
+                if (dlFileEl) {
+                  dlFileEl.textContent = "";
+                }
               }
             });
 

src/experimental/studio/live.css

@@ -23,6 +23,17 @@
   font-size: 14px;
   opacity: 0.7;
 }
+.loading-download {
+  display: none;
+  margin-top: 24px;
+  opacity: 0.6;
+}
+.loading-download-label {
+  font-size: 13px;
+}
+.loading-download-file {
+  font-size: 13px;
+}
 #dropOverlay {
   position: fixed;
   top: 0;

src/experimental/studio/live.html

@@ -10,6 +10,10 @@
       <div class="loading-container">
         <div class="loading-title">Loading model&hellip;</div>
         <div class="loading-subtitle">This may take a moment for large models.</div>
+        <div id="loadingDownload" class="loading-download">
+          <div class="loading-download-label">Downloading asset file</div>
+          <div id="loadingDownloadFile" class="loading-download-file"></div>
+        </div>
       </div>
     </div>
     <div id="dropOverlay">