Skip startup animations with startDelay

JetStream.css

@@ -63,7 +63,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,15 +174,23 @@ 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;
+    height: 75px;
+}
+
+.loading.animate .logo .logo-image {
     animation: swingin 350ms ease-out forwards;
     will-change: transform, opacity;
-    height: 75px;
+    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;
@@ -194,6 +203,14 @@ img {
     max-height: 120px;
 }
 
+.loading.animate #jetstreams {
+    background-image: url("img/jetstreams.svg");
+}
+
+.loading #jetstreams, .ready #jetstreams {
+    background-image: url("img/jetstreams-static.svg");
+}
+
 #magic {
     position: absolute;
     top: -900px;
@@ -215,7 +232,13 @@ article,
 .summary {
     max-width: 70rem;
     margin: 0 auto 0 auto;
+}
+
+.loading.animate .summary {
     opacity: 0;
+}
+
+article, .loading.animate .summary {
     animation: fadein 0.5s ease-in-out forwards;
     animation-delay: 200ms;
 }
@@ -302,17 +325,12 @@ a.button {
     user-select: none;
 }
 
-a.button {
-    animation: fadein 500ms ease-in forwards, scaledown 500ms ease-in forwards;
-    opacity: 0;
-}
-
 #status label,
 .button:hover {
     background-image: none;
 }
 
-#status.loading {
+.loading #status{
     position: absolute;
     top: 0;
     left: 0;
@@ -331,7 +349,7 @@ a.button {
     user-select: none;
 }
 
-#status.error {
+.error #status {
     max-width: 70rem;
     margin: 0 auto 1rem;
 }

JetStreamDriver.js

@@ -324,7 +324,6 @@ class Driver {
             }
             summaryHtml += "</div>";
             const summaryElement = document.getElementById("result-summary");
-            summaryElement.classList.add("done");
             summaryElement.innerHTML = summaryHtml;
             summaryElement.onclick = displayCategoryScores;
             statusElement.innerHTML = "";
@@ -370,6 +369,14 @@ class Driver {
             if (e.key === "Enter")
                 JetStream.start();
         });
+
+        const statusElement = document.getElementById("status");
+        statusElement.innerHTML = `<a href="javascript:JetStream.start()" class="button">Start Test</a>`;
+        statusElement.addEventListener("click", (e) => {
+            e.preventDefault();
+            JetStream.start();
+            return false;
+        }, { once: true});
     }
 
     reportError(benchmark, error) {
@@ -445,15 +452,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") {

index.html

@@ -51,25 +51,32 @@
     }
 
     async function initialize() {
+        const bodyClassList = document.body.classList;
+        if (JetStreamParams.startDelay !== undefined) {
+            bodyClassList.remove("animate");
+        }
         if (!JetStreamParams.isDefault) {
             showNonDefaultParams();
         }
         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) {
+            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 +94,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 +123,7 @@ <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">Loading Benchmark...</div>
 
     <div id="results"></div>
 </main>