Skip startup animations with startDelay

JetStream.css

@@ -41,6 +41,7 @@
     --benchmark-done-result-color: #4A4A4A;
     --gap: 3rem;
     --width: 200px;
+    --startup-animation-duration: 500ms;
 }
 
 html,
@@ -63,7 +64,8 @@ body {
     background-position: center -5vw;
     background-size: 100vw;
     padding-bottom: 0px;
-    background-image: url('clouds.svg');
+    background-image: url('img/clouds.svg');
+    padding-bottom: 0px;
     overflow-y: hidden;
     height: 100%;
 }
@@ -173,27 +175,45 @@ img {
     box-sizing: border-box;
     background-repeat: no-repeat;
     background-position: center;
-    background-image: url('JetStream3Logo.svg');
+    background-image: url('img/JetStream3Logo.svg');
     color: transparent;
-    animation: swingin 350ms ease-out forwards;
-    will-change: transform, opacity;
     height: 75px;
 }
 
+.loading.animate .logo .logo-image {
+    animation: swingin var(--startup-animation-duration) ease-out forwards;
+    will-change: transform, opacity;
+    animation-delay: 50ms;
+}
+
+.ready .logo .logo-image {
+    animation: none;
+    opacity: 1;
+}
+
 #jetstreams {
-    background-image: url('jetstreams.svg');
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
     padding: 2rem 0;
     margin: -2rem 0;
+    background-image: url("img/jetstreams-static.svg");
 }
 
+
 #jetstreams svg {
     width: 100%;
     max-height: 120px;
 }
 
+.animate #jetstreams {
+    background-image: url("img/jetstreams.svg");
+    transition: background-image var(--startup-animation-duration) ease-in-out;
+}
+.ready #jetstreams {
+    background-image: url("img/jetstreams-static.svg") !important;
+}
+
 #magic {
     position: absolute;
     top: -900px;
@@ -215,8 +235,14 @@ article,
 .summary {
     max-width: 70rem;
     margin: 0 auto 0 auto;
+}
+
+.loading.animate .summary {
     opacity: 0;
-    animation: fadein 0.5s ease-in-out forwards;
+}
+
+article, .loading.animate .summary {
+    animation: fadein var(--startup-animation-duration) ease-in-out forwards;
     animation-delay: 200ms;
 }
 
@@ -302,17 +328,18 @@ a.button {
     user-select: none;
 }
 
-a.button {
-    animation: fadein 500ms ease-in forwards, scaledown 500ms ease-in forwards;
+.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;
 }
 
-#status.loading {
+.loading #status-counter {
     position: absolute;
     top: 0;
     left: 0;
@@ -331,7 +358,7 @@ a.button {
     user-select: none;
 }
 
-#status.error {
+.error #status {
     max-width: 70rem;
     margin: 0 auto 1rem;
 }
@@ -386,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;
@@ -406,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;
 }
@@ -593,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() {
@@ -324,7 +321,6 @@ class Driver {
             }
             summaryHtml += "</div>";
             const summaryElement = document.getElementById("result-summary");
-            summaryElement.classList.add("done");
             summaryElement.innerHTML = summaryHtml;
             summaryElement.onclick = displayCategoryScores;
             statusElement.innerHTML = "";
@@ -357,7 +353,7 @@ class Driver {
         }
     }
 
-    prepareBrowserUI() {
+    async prepareBrowserUI() {
         let text = "";
         for (const benchmark of this.benchmarks)
             text += benchmark.renderHTML();
@@ -370,6 +366,27 @@ class Driver {
             if (e.key === "Enter")
                 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) {
@@ -401,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"));
@@ -445,15 +462,6 @@ class Driver {
         }
 
         JetStream.loadCache = { }; // Done preloading all the files.
-
-        const statusElement = document.getElementById("status");
-        statusElement.classList.remove('loading');
-        statusElement.innerHTML = `<a href="javascript:JetStream.start()" class="button">Start Test</a>`;
-        statusElement.onclick = () => {
-            statusElement.onclick = null;
-            JetStream.start();
-            return false;
-        }
     }
 
     resultsObject(format = "run-benchmark") {
@@ -1043,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} ...`;
     }
 

index.html

@@ -51,7 +51,9 @@
     }
 
     async function initialize() {
+        const bodyClassList = document.body.classList;
         if (!JetStreamParams.isDefault) {
+            bodyClassList.remove("animate");
             showNonDefaultParams();
         }
         if (globalThis.allIsGood) {
@@ -60,16 +62,17 @@
             } catch (e) {
                 globalThis.allIsGood = false;
                 console.error(e);
+            } finally {
+                bodyClassList.remove("loading");
             }
         }
         if (!globalThis.allIsGood) {
+            bodyClassList.add('error');
             let statusElement = document.getElementById("status");
-            statusElement.classList.remove('loading');
-            statusElement.classList.add('error');
             statusElement.innerHTML = "<h2>ERROR</h2><p>Errors were encountered during page load. Refusing to run a partial benchmark suite.</p>";
         }
     }
-    
+
     function showNonDefaultParams() {
         document.body.classList.add("nonDefaultParams"); 
         const body = document.querySelector("#non-standard-params-table tbody");
@@ -87,7 +90,7 @@
     <script src="JetStreamDriver.js"></script>
 
 </head>
-<body onload="initialize()">
+<body onload="initialize()" class="loading animate">
 <h1 class="logo">
     <div id="jetstreams">
         <a href="index.html" class="logo-image">JetStream 3</a>
@@ -116,7 +119,9 @@ <h2>Non-standard Parameters</h2>
     <p class="summary" id="mode-description"></p>
 
     <div id="result-summary"></div>
-    <div id="status" class="loading">Loading Benchmark...</div>
+    <div id="status">
+        <div id="status-counter">Loading Benchmark...</div>
+    </div>
 
     <div id="results"></div>
 </main>