[Merged by Bors] - Improve examples loading feedback

generate-wasm-examples/generate_wasm_examples.sh

@@ -35,6 +35,15 @@ add_category()
         cp examples/$category_path/$example.rs ../../content/examples/$category_path/$example/
         cargo build --release --target wasm32-unknown-unknown --example $example
         wasm-bindgen --out-dir ../../content/examples/$category_path/$example --no-typescript --target web target/wasm32-unknown-unknown/release/examples/$example.wasm
+
+        # Patch generated JS to allow to inject custom `fetch` with loading feedback.
+        # See: https://github.com/bevyengine/bevy-website/pull/355
+        sed -i.bak \
+          -e 's/function init(input) {/function init(customFetch, input) { customFetch = customFetch || fetch;/' \
+          -e 's/input = fetch(/input = customFetch(/' \
+          -e 's/getObject(arg0).fetch(/customFetch(/' \
+          ../../content/examples/$category_path/$example/$example.js
+
         echo "+++
 title = \"$example\"
 template = \"example.html\"

sass/components/_bevy-instance.scss

@@ -0,0 +1,68 @@
+.bevy-instance {
+    position: relative;
+
+    &__progress-status {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        bottom: 50%;
+        left: 50%;
+        width: 250px;
+        transform: translateX(-50%);
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    &__progress-file {
+        margin-bottom: 4px;
+        font-weight: normal;
+        text-shadow: 1px 1px 1px #000;
+        font-size: 0.85rem;
+        word-break: break-all;
+    }
+
+    &__progress-track {
+        width: 100%;
+        height: 4px;
+        border-radius: 4px;
+        background-color: #555;
+
+        &:not(:last-child) {
+            margin-bottom: 2px;
+        }
+    }
+
+    &__progress-bar {
+        height: 4px;
+        min-width: 4px;
+        background-color: #799bbb;
+        border-radius: 4px;
+    }
+
+    &__canvas {
+        width: 100% !important;
+        height: auto !important;
+        border-radius: $border-radius;
+
+        &--loading {
+            @keyframes loading-animation {
+                0%   { background-position: -1000px 0; }
+                20%  { background-position: -500px 0; }
+                25%  { background-position: -250px 0; }
+                40%  { background-position: -125px 0; }
+                100% { background-position: 0 0; }
+            }
+
+            animation-duration: 1s;
+            animation-fill-mode: forwards;
+            animation-iteration-count: infinite;
+            animation-name: loading-animation;
+            animation-timing-function: linear;
+            background: #2b2c2f;
+            background: linear-gradient(to right, #2b2c2f 20%, #36383f 40%, #2b2c2f 60%);
+            background-size: 1000px 50px;
+        }
+    }
+}

sass/components/_example.scss

@@ -47,10 +47,4 @@
         grid-area: github;
         text-align: right;
     }
-
-    &__canvas {
-        width: 100% !important;
-        height: auto !important;
-        border-radius: $border-radius;
-    }
 }

sass/site.scss

@@ -19,6 +19,7 @@
 // - Repeating visual patterns: buttons, cards, menus…
 // - Components can be composed between them to create new components
 // - These should be self contained and shouldn't affect other styling
+@import "components/bevy-instance";
 @import "components/book-footer";
 @import "components/book-nav";
 @import "components/card";

static/tools.js

@@ -0,0 +1,48 @@
+import { ReadableStream as PolyfillReadableStream, TransformStream as PolyfillTransformStream } from '/web-streams.es6.mjs';
+import { createReadableStreamWrapper } from '/web-streams-adapter.mjs';
+
+function getFilename(resource) {
+  const pathname = (typeof resource === 'string')
+    ? resource
+    : (resource instanceof URL)
+      ? resource.pathname
+      : '';
+
+  const parts = pathname.split('/');
+
+  return parts[parts.length - 1];
+}
+
+// `progressiveFetch` is a wrapper over `window.fetch`. It allows you to insert middle-ware that is
+// polled as the fetch completes. See bevy-website/issues/338 for details.
+async function progressiveFetch(resource, callbacks={}) {
+  const toPolyfillReadable = createReadableStreamWrapper(PolyfillReadableStream);
+  const toNativeReadable = createReadableStreamWrapper(window.ReadableStream);
+  const filename = getFilename(resource);
+
+  const cb = Object.assign({
+    start: (filename, length) => {},
+    update: (filename, loaded, length) => {},
+    finish: (filename, length) => {},
+  }, callbacks);
+  let response = await fetch(resource);
+  const lengthBytes = response.headers.get('content-length');
+  let loadedBytes = 0;
+  const transform = new PolyfillTransformStream({
+    start() {
+      cb.start(filename, lengthBytes);
+    },
+    transform(chunk, controller) {
+      loadedBytes += chunk.byteLength;
+      cb.update(filename, loadedBytes, lengthBytes);
+      controller.enqueue(chunk);
+    },
+    flush() {
+      cb.update(filename, lengthBytes, lengthBytes);
+      cb.finish(filename, lengthBytes);
+    },
+  });
+  return new Response(toNativeReadable(toPolyfillReadable(response.body).pipeThrough(transform)), response);
+}
+
+export { progressiveFetch };