From b8521be905bd9a24a110eeda009391e6a13e85da Mon Sep 17 00:00:00 2001
From: Corvus <corvusprudens@gmail.com>
Date: Thu, 19 Feb 2026 22:22:46 -0700
Subject: [PATCH 1/3] Add loading bar to web template

---
 assets/web/index.html | 134 ++++++++++++++++++++++++++++++++++++++++--
 src/web/bundle.rs     |  22 ++++++-
 2 files changed, 149 insertions(+), 7 deletions(-)

diff --git a/assets/web/index.html b/assets/web/index.html
index ea8e1480..297f0ff9 100644
--- a/assets/web/index.html
+++ b/assets/web/index.html
@@ -62,6 +62,45 @@
           transform: rotate(360deg);
         }
       }
+
+      .bar-container {
+        width: 128px;
+        height: 12px;
+        border: 3px solid #ececec;
+        border-radius: 0.375em;
+        position: relative;
+        overflow: hidden;
+        margin-top: 24px;
+        margin-bottom: 12px;
+      }
+
+      .loading-bar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #b2b2b2;
+        transform-origin: center left;
+        transform: scaleX(0);
+      }
+
+      .progress-text {
+        font-size: 0.9rem;
+        color: #ececec;
+        font-family:
+          DejaVu Sans Mono,
+          monospace;
+      }
+
+      .error {
+        font-size: 0.9rem;
+        color: salmon;
+        font-family:
+          DejaVu Sans Mono,
+          monospace;
+        margin-top: 12px;
+      }
     </style>
   </head>
 
@@ -69,6 +108,11 @@
     <noscript>JavaScript support is required to run this app</noscript>
     <div id="loading-screen" class="center">
       <span class="spinner"></span>
+      <div hidden="hidden" class="bar-container">
+        <div class="loading-bar"></div>
+      </div>
+      <div class="progress-text"></div>
+      <div class="error"></div>
     </div>
 
     <script type="module">
@@ -134,14 +178,94 @@
     </script>
 
     <script type="module">
-      // Starting the game
-
       // When this file is used as the default `index.html`, the CLI will automatically replace
-      // `bevy_app.js` with the name of the generated JS entrypoint. If you copy this file and
-      // customize it, you will need to manually change the name. For more information, please see
+      // `bevy_app.js` and `bevy_app_bg.wasm` with the name of the generated JS entrypoint and Wasm
+      // binary. If you copy this file and customize it, you will need to manually change
+      // the names. For more information, please see
       // <https://thebevyflock.github.io/bevy_cli/cli/web/default-index-html.html>!
       import init from "./build/bevy_app.js";
-      init().catch((error) => {
+      const wasmPath = "./build/bevy_app_bg.wasm";
+      const wasmSize = null;
+
+      // Provide progress reporting when fetching the Wasm binary
+      async function fetchWithProgress(url, total, onProgress) {
+        const response = await fetch(url);
+
+        if (!response.ok) {
+          throw new Error(`request failed with status ${response.status}`);
+        }
+
+        if (total === null) {
+          // If the content length isn't provided,
+          // we'll just skip the progress reporting
+          return await response.arrayBuffer();
+        }
+
+        let receivedLength = 0;
+        const chunks = [];
+
+        for await (const chunk of response.body) {
+          chunks.push(chunk);
+          receivedLength += chunk.length;
+
+          const progress = receivedLength / total;
+
+          // Interacting with the DOM or other operations
+          // here should not cause downloading to fail
+          try {
+            onProgress({
+              loaded: receivedLength,
+              total: total,
+              progress: progress,
+            });
+          } catch (e) {
+            console.error(e);
+          }
+        }
+
+        const chunksAll = new Uint8Array(receivedLength);
+        let position = 0;
+        for (let chunk of chunks) {
+          chunksAll.set(chunk, position);
+          position += chunk.length;
+        }
+
+        return chunksAll.buffer;
+      }
+
+      function humanReadable(number) {
+        // Working with Bevy on the web, we can safely
+        // assume this scale
+        return `${(number / 1e6).toFixed(2)}MB`;
+      }
+
+      async function loadWasm(url, size) {
+        let arrayBuffer;
+        try {
+          arrayBuffer = await fetchWithProgress(url, size, (stats) => {
+            const container = document.querySelector(".bar-container");
+            container.removeAttribute("hidden");
+
+            const bar = document.querySelector(".loading-bar");
+            bar.style.transform = `scaleX(${stats.progress})`;
+
+            const text = document.querySelector(".progress-text");
+            text.innerText = `${humanReadable(stats.loaded)} / ${humanReadable(stats.total)}`;
+          });
+        } catch (e) {
+          // Here, we communicate any request failure to the user
+          const errorNode = document.querySelector(".error");
+          if (errorNode !== null) {
+            errorNode.innerText = e.toString();
+          }
+          throw e;
+        }
+
+        return await init(arrayBuffer);
+      }
+
+      // Starting the game
+      loadWasm(wasmPath, wasmSize).catch((error) => {
         if (
           !error.message.startsWith(
             "Using exceptions for control flow, don't mind me. This isn't actually an error!"
diff --git a/src/web/bundle.rs b/src/web/bundle.rs
index 22b82e89..19875008 100644
--- a/src/web/bundle.rs
+++ b/src/web/bundle.rs
@@ -263,10 +263,28 @@ fn default_index(bin_target: &BinTarget) -> String {
     ));
 
     // Insert correct path to JS bindings
-    template.replace(
+    let template = template.replace(
         "./build/bevy_app.js",
         format!("./build/{}.js", bin_target.bin_name).as_str(),
-    )
+    );
+    let template = template.replace(
+        "./build/bevy_app_bg.wasm",
+        format!("./build/{}_bg.wasm", bin_target.bin_name).as_str(),
+    );
+
+    if let Ok(metadata) = std::fs::metadata(
+        bin_target
+            .artifact_directory
+            .join(format!("{}_bg.wasm", bin_target.bin_name)),
+    ) {
+        let length = metadata.len();
+        template.replace(
+            "const wasmSize = null;",
+            format!("const wasmSize = {}", length).as_str(),
+        )
+    } else {
+        template
+    }
 }
 
 /// Generate a title to display on the web page by default.

From 36ec58cfb0d3848a9efd5d7e128500ac9cb17c9e Mon Sep 17 00:00:00 2001
From: Corvus <corvusprudens@gmail.com>
Date: Sun, 22 Feb 2026 15:40:58 -0700
Subject: [PATCH 2/3] Simplify bytes presentation

---
 assets/web/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/web/index.html b/assets/web/index.html
index 297f0ff9..cb224b41 100644
--- a/assets/web/index.html
+++ b/assets/web/index.html
@@ -236,7 +236,7 @@
       function humanReadable(number) {
         // Working with Bevy on the web, we can safely
         // assume this scale
-        return `${(number / 1e6).toFixed(2)}MB`;
+        return `${(number / 1e6).toFixed(2)} MB`;
       }
 
       async function loadWasm(url, size) {
@@ -250,7 +250,7 @@
             bar.style.transform = `scaleX(${stats.progress})`;
 
             const text = document.querySelector(".progress-text");
-            text.innerText = `${humanReadable(stats.loaded)} / ${humanReadable(stats.total)}`;
+            text.innerText = `${humanReadable(stats.loaded)}`;
           });
         } catch (e) {
           // Here, we communicate any request failure to the user

From de24c751edbd40b79dd4a7092e27fd305a3f88d1 Mon Sep 17 00:00:00 2001
From: Corvus <corvusprudens@gmail.com>
Date: Sun, 22 Feb 2026 15:44:33 -0700
Subject: [PATCH 3/3] Remove unnecessary template literal

---
 assets/web/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/web/index.html b/assets/web/index.html
index cb224b41..059885aa 100644
--- a/assets/web/index.html
+++ b/assets/web/index.html
@@ -250,7 +250,7 @@
             bar.style.transform = `scaleX(${stats.progress})`;
 
             const text = document.querySelector(".progress-text");
-            text.innerText = `${humanReadable(stats.loaded)}`;
+            text.innerText = humanReadable(stats.loaded);
           });
         } catch (e) {
           // Here, we communicate any request failure to the user