Skip startup animations with startDelay

JetStreamDriver.js

@@ -330,10 +330,7 @@ class Driver {
         this.benchmarks = Array.from(new Set(benchmarks));
         this.benchmarks.sort((a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? 1 : -1);
         console.assert(this.benchmarks.length, "No benchmarks selected");
-        this.counter = { };
-        this.counter.loadedResources = 0;
-        this.counter.totalResources = 0;
-        this.counter.failedPreloadResources = 0;
+        this.counter = { loadedResources: 0, totalResources: 0, failedPreloadResources: 0 };
     }
 
     async start() {
@@ -428,7 +425,6 @@ class Driver {
             }
             summaryHtml += "</div>";
             const summaryElement = document.getElementById("result-summary");
-            summaryElement.classList.add("done");
             summaryElement.innerHTML = summaryHtml;
             summaryElement.onclick = displayCategoryScores;
             statusElement.innerHTML = "";
@@ -461,7 +457,7 @@ class Driver {
         }
     }
 
-    prepareBrowserUI() {
+    async prepareBrowserUI() {
         let text = "";
         for (const benchmark of this.benchmarks)
             text += benchmark.renderHTML();
@@ -474,6 +470,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) {
@@ -505,7 +522,7 @@ class Driver {
         await this.prefetchResources();
         this.benchmarks.sort((a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? 1 : -1);
         if (isInBrowser)
-            this.prepareBrowserUI();
+            await this.prepareBrowserUI();
         this.isReady = true;
         if (isInBrowser) {
             globalThis.dispatchEvent(new Event("JetStreamReady"));
@@ -549,15 +566,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;
-        }
     }
 
     updateCounterUI() {

index.html

@@ -51,6 +51,7 @@
     }
 
     async function initialize() {
+        const bodyClassList = document.body.classList;
         if (!JetStreamParams.isDefault) {
             showNonDefaultParams();
         }
@@ -60,16 +61,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");
@@ -84,12 +86,15 @@
         }
     }
     </script>
-
     <script src="utils/params.js"></script>
+    <script>
+        if (JetStreamParams.isDefault) {
+            document.body.classList.add("animate");
+        }
+    </script>
     <script src="JetStreamDriver.js"></script>
-
 </head>
-<body onload="initialize()">
+<body onload="initialize()" class="loading">
 <h1 class="logo">
     <div id="jetstreams">
         <a href="index.html" class="logo-image">JetStream Next</a>
@@ -118,7 +123,7 @@ <h2>Non-standard Parameters</h2>
     <p class="summary" id="mode-description"></p>
 
     <div id="result-summary"></div>
-    <div id="status" class="loading">
+    <div id="status">
         <div id="status-text">Loading Benchmark...</div>
         <div id="status-progress-container">
             <div id="status-progress-bar" style="width: 0%"></div>

resources/JetStream.css

@@ -41,6 +41,7 @@
     --benchmark-done-result-color: #4a4a4a;
     --gap: 3rem;
     --width: 200px;
+    --startup-animation-duration: 500ms;
     --nonDefaultRotate: 152deg;
 }
 
@@ -65,6 +66,7 @@ body {
     background-size: 100vw;
     padding-bottom: 0px;
     background-image: url("clouds.svg");
+    padding-bottom: 0px;
     overflow-y: hidden;
     height: 100%;
 }
@@ -180,25 +182,43 @@ img {
     background-size: contain;
     background-image: url("JetStreamNxLogo.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("jetstreams-static.svg");
 }
 
+
 #jetstreams svg {
     width: 100%;
     max-height: 120px;
 }
 
+.animate #jetstreams {
+    background-image: url("jetstreams.svg");
+    transition: background-image var(--startup-animation-duration) ease-in-out;
+}
+.ready #jetstreams {
+    background-image: url("jetstreams-static.svg") !important;
+}
+
 #magic {
     position: absolute;
     top: -900px;
@@ -220,8 +240,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;
 }
 
@@ -341,7 +367,7 @@ a:active {
     color: var(--link-hover-color);
 }
 
-#status label,
+#status-label,
 a.button {
     display: inline-block;
     font-weight: 500;
@@ -359,18 +385,19 @@ 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,
-#status-progress-bar {
+.loading #status-text,
+.loading #status-progress-bar {
     background-image: linear-gradient(
         132deg,
         #96e5ff 0%,
@@ -382,11 +409,19 @@ a.button {
     );
 }
 
-#status.loading {
+.loading:not(.ready) #status {
     position: absolute;
-    top: 0;
-    left: 0;
-    margin: 48vh 0 0;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 100;
+}
+
+.loading #status-text {
     width: 100%;
     line-height: 1.2;
     font-size: 4rem;
@@ -398,9 +433,10 @@ a.button {
     background-repeat: no-repeat;
     -webkit-touch-callout: none;
     user-select: none;
+    text-align: center;
 }
 
-#status.error {
+.error #status {
     max-width: 70rem;
     margin: 0 auto 1rem;
 }
@@ -467,14 +503,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;
@@ -487,6 +522,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;
 }
@@ -673,16 +714,6 @@ dt:target {
     }
 }
 
-@keyframes shine {
-    0% {
-        background-position: -1200px center;
-    }
-
-    100% {
-        background-position: 100vw center;
-    }
-}
-
 @keyframes swingin {
     from {
         opacity: 0;