fix

Author: camillobruni

JetStream.css

@@ -41,6 +41,7 @@
     --benchmark-done-result-color: #4A4A4A;
     --gap: 3rem;
     --width: 200px;
+    --startup-animation-duration: 500ms;
 }
 
 html,
@@ -180,7 +181,7 @@ img {
 }
 
 .loading.animate .logo .logo-image {
-    animation: swingin 350ms ease-out forwards;
+    animation: swingin var(--startup-animation-duration) ease-out forwards;
     will-change: transform, opacity;
     animation-delay: 50ms;
 }
@@ -196,19 +197,21 @@ img {
     background-position: center;
     padding: 2rem 0;
     margin: -2rem 0;
+    background-image: url("img/jetstreams-static.svg");
 }
 
+
 #jetstreams svg {
     width: 100%;
     max-height: 120px;
 }
 
-.loading.animate #jetstreams {
+.animate #jetstreams {
     background-image: url("img/jetstreams.svg");
+    transition: background-image var(--startup-animation-duration) ease-in-out;
 }
-
-.loading #jetstreams, .ready #jetstreams {
-    background-image: url("img/jetstreams-static.svg");
+.ready #jetstreams {
+    background-image: url("img/jetstreams-static.svg") !important;
 }
 
 #magic {
@@ -239,7 +242,7 @@ article,
 }
 
 article, .loading.animate .summary {
-    animation: fadein 0.5s ease-in-out forwards;
+    animation: fadein var(--startup-animation-duration) ease-in-out forwards;
     animation-delay: 200ms;
 }
 
@@ -325,12 +328,18 @@ a.button {
     user-select: none;
 }
 
+.animate a.button {
+    animation: fadein var(--startup-animation-duration) ease-in forwards, scaledown var(--startup-animation-duration) ease-in forwards;
+    opacity: 0;
+}
+
+
 #status label,
 .button:hover {
     background-image: none;
 }
 
-.loading #status{
+.loading #status-counter {
     position: absolute;
     top: 0;
     left: 0;
@@ -404,14 +413,13 @@ a.button {
     justify-content: space-around;
     gap: var(--gap);
     margin: 0 calc(var(--gap) * -1) 0 calc(-var(--gap) * -1);
-    animation: fadein 500ms ease-out forwards;
-    opacity: 0;
     overflow-y: auto;
     flex: 1;
     padding-bottom: var(--gap);
     box-sizing: border-box;
 }
 
+
 .benchmark {
     position: relative;
     flex: 1;
@@ -424,6 +432,12 @@ a.button {
     scroll-margin-bottom: 20vh;
 }
 
+.animate .benchmark {
+    animation: fadein var(--startup-animation-duration) ease-in forwards;
+    opacity: 0;
+}
+
+
 .benchmark .result.detail {
     display: none;
 }
@@ -611,16 +625,6 @@ dt:target {
     }
 }
 
-@keyframes shine {
-    0% {
-        background-position: -1200px center;
-    }
-
-    100% {
-        background-position: 100vw center;
-    }
-}
-
 @keyframes swingin {
     from {
         opacity: 0;

JetStreamDriver.js

@@ -217,10 +217,7 @@ class Driver {
         // the global `fileLoader` cache.
         this.blobDataCache = { };
         this.loadCache = { };
-        this.counter = { };
-        this.counter.loadedResources = 0;
-        this.counter.totalResources = 0;
-        this.counter.failedPreloadResources = 0;
+        this.counter = { loadedResources: 0, totalResources: 0, failedPreloadResources: 0 };
     }
 
     async start() {
@@ -356,7 +353,7 @@ class Driver {
         }
     }
 
-    prepareBrowserUI() {
+    async prepareBrowserUI() {
         let text = "";
         for (const benchmark of this.benchmarks)
             text += benchmark.renderHTML();
@@ -370,15 +367,28 @@ class Driver {
                 JetStream.start();
         });
 
+        document.body.classList.add("ready");
         const statusElement = document.getElementById("status");
         statusElement.innerHTML = `<a href="javascript:JetStream.start()" class="button">Start Test</a>`;
+
+        await this.waitForBrowserUIStartupAnimation();
+
         statusElement.addEventListener("click", (e) => {
             e.preventDefault();
             JetStream.start();
             return false;
         }, { once: true});
     }
 
+
+    async waitForBrowserUIStartupAnimation() {
+        if (!JetStreamParams.isDefault)
+            return
+        const cssValue = window.getComputedStyle(document.body).getPropertyValue("--startup-animation-duration");
+        const startupAnimationDuration = parseInt(cssValue.split("ms")[0])
+        await new Promise((resolve) => setTimeout(resolve, startupAnimationDuration));
+    }
+
     reportError(benchmark, error) {
         this.pushError(benchmark.name, error);
 
@@ -408,7 +418,7 @@ class Driver {
         await this.prefetchResources();
         this.benchmarks.sort((a, b) => a.plan.name.toLowerCase() < b.plan.name.toLowerCase() ? 1 : -1);
         if (isInBrowser)
-            this.prepareBrowserUI();
+            await this.prepareBrowserUI();
         this.isReady = true;
         if (isInBrowser) {
             globalThis.dispatchEvent(new Event("JetStreamReady"));
@@ -1041,7 +1051,7 @@ class Benchmark {
     updateCounter() {
         const counter = JetStream.counter;
         ++counter.loadedResources;
-        const statusElement = document.getElementById("status");
+        const statusElement = document.getElementById("status-counter");
         statusElement.innerHTML = `Loading ${counter.loadedResources} of ${counter.totalResources} ...`;
     }
 

img/jetstreams.svg

@@ -59,13 +59,11 @@
         if (globalThis.allIsGood) {
             try {
                 await JetStream.initialize();
-                document.body.classList.add("ready");
             } catch (e) {
                 globalThis.allIsGood = false;
                 console.error(e);
             } finally {
                 bodyClassList.remove("loading");
-                bodyClassList.remove("animate-loading");
             }
         }
         if (!globalThis.allIsGood) {
@@ -121,7 +119,9 @@ <h2>Non-standard Parameters</h2>
     <p class="summary" id="mode-description"></p>
 
     <div id="result-summary"></div>
-    <div id="status">Loading Benchmark...</div>
+    <div id="status">
+        <div id="status-counter">Loading Benchmark...</div>
+    </div>
 
     <div id="results"></div>
 </main>