From 7c47a89cd0334d711da0ba8bf0c9d30140ad4784 Mon Sep 17 00:00:00 2001
From: Saran Tunyasuvunakool <stunya@google.com>
Date: Wed, 20 May 2026 16:25:53 -0700
Subject: [PATCH] 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 | 18 +++++++++++++++++-
 src/experimental/studio/live.css      | 11 +++++++++++
 src/experimental/studio/live.html     |  4 ++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/experimental/studio/emscripten.cc b/src/experimental/studio/emscripten.cc
index 0e427626..644c9ea6 100644
--- a/src/experimental/studio/emscripten.cc
+++ b/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 = "";
+                }
               }
             });
 
diff --git a/src/experimental/studio/live.css b/src/experimental/studio/live.css
index 74d7cfe9..6c668b27 100644
--- a/src/experimental/studio/live.css
+++ b/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;
diff --git a/src/experimental/studio/live.html b/src/experimental/studio/live.html
index 9e101e02..81714b38 100644
--- a/src/experimental/studio/live.html
+++ b/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">