Revert "DEV: Use performance.timing as a baseline for the splash (#17275)" (#17276)

This reverts commit 6146da5eb7.

app/assets/javascripts/discourse/app/app.js

@@ -81,6 +81,15 @@ const Discourse = Application.extend({
         initialize: () => withPluginApi(cb.version, cb.code),
       });
     });
+
+    window.addEventListener(
+      "load",
+      () => {
+        // The app booted. Remove the splash screen
+        document.querySelector("#d-splash")?.remove();
+      },
+      { once: true }
+    );
   },
 
   _registerPluginCode(version, code) {

app/views/common/_discourse_splash.html.erb

@@ -9,14 +9,13 @@
       display: grid;
       place-items: center;
       backface-visibility: hidden;
-      background: var(--secondary);
       position: absolute;
       left: 0;
       top: 0;
       height: 100%;
       width: 100%;
-      z-index: 1001;
+      z-index: 1001; /* above the header */
-      --animation-state: paused;
+      background: var(--secondary);
     }
 
     #d-splash .preloader-image {
@@ -26,26 +25,22 @@
 
     #d-splash .preloader-text {
       padding-top: 4em;
-      position: absolute;
+          position: absolute;
-      opacity: 0;
+          opacity: 0;
-      animation: fade-in 0.5s ease-in-out;
+          animation: fade-in 0.5s ease-in-out;
-      animation-delay: 1s;
+          animation-delay: 2.5s;
-      animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
-      animation-play-state: var(--animation-state);
+          color: var(--primary);
-      color: var(--primary);
     }
 
     #d-splash .preloader-text:after {
       animation: loading-text 3s infinite;
       content: "";
       position: absolute;
-      top: 4em;
       margin: 0 0.1em;
-      left: 100%;
     }
 
     .rtl #d-splash .preloader-text:after {
-      left: 0;
       right: 100%;
     }
 
@@ -76,7 +71,7 @@
 
   <img
     class="preloader-image"
-    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%0A%3E%3Cstyle%3E /* these need to be injected dynamicly to match theme colors */ :root %7B --primary: %23222222; --secondary: %23ffffff; --tertiary: %23f15c21; --highlight: %23f0ea88; --quaternary: %2365ccff; --success: %23009900; --animation-state: paused; %7D /* these styles need to live here because the SVG has a different scope */ .dots %7B animation-name: loader; animation-timing-function: ease-in-out; animation-duration: 3s; animation-iteration-count: infinite; animation-play-state: var(--animation-state); stroke: %23fff; stroke-width: 0.5px; transform-origin: center; opacity: 0; r: max(1vw, 11px); cy: 50%25; %7D .dots:first-child %7B fill: var(--tertiary); %7D .dots:nth-child(2) %7B fill: var(--tertiary); animation-delay: 0.15s; %7D .dots:nth-child(3) %7B fill: var(--highlight); animation-delay: 0.3s; %7D .dots:nth-child(4) %7B fill: var(--quaternary); animation-delay: 0.45s; %7D .dots:nth-child(5) %7B fill: var(--quaternary); animation-delay: 0.6s; %7D @keyframes loader %7B 0%25 %7B opacity: 0; transform: scale(1); %7D 45%25 %7B opacity: 1; transform: scale(0.7); %7D 65%25 %7B opacity: 1; transform: scale(0.7); %7D 100%25 %7B opacity: 0; transform: scale(1); %7D %7D %3C/style%3E%3Cg class='container'%3E%3Ccircle class='dots' cx='30vw' /%3E%3Ccircle class='dots' cx='40vw' /%3E%3Ccircle class='dots' cx='50vw' /%3E%3Ccircle class='dots' cx='60vw' /%3E%3Ccircle class='dots' cx='70vw' /%3E%3C/g%3E%3C/svg%3E%0A"
+    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' data-ember-extension='1'%3E%3Cstyle%3E /* these need to be injected dynamicly to match theme colors */ :root %7B --primary: %23222222; --secondary: %23ffffff; --tertiary: %23f15c21; --highlight: %23f0ea88; --quaternary: %2365ccff; --success: %23009900; %7D /* these styles need to live here because the SVG has a different scope */ .dots %7B animation-name: loader; animation-timing-function: ease-in-out; animation-duration: 3s; animation-iteration-count: infinite; animation-delay: 1.5s; stroke: %23fff; stroke-width: 0.5px; transform-origin: center; opacity: 0; r: max(1vw, 11px); cy: 50%25; %7D .dots:first-child %7B fill: var(--tertiary); animation-delay: 1.25s; %7D .dots:nth-child(2) %7B fill: var(--tertiary); animation-delay: 1.35s; %7D .dots:nth-child(3) %7B fill: var(--highlight); animation-delay: 1.45s; %7D .dots:nth-child(4) %7B fill: var(--quaternary); animation-delay: 1.55s; %7D .dots:nth-child(5) %7B fill: var(--quaternary); animation-delay: 1.65s; %7D @keyframes loader %7B 0%25 %7B opacity: 0; transform: scale(1); %7D 45%25 %7B opacity: 1; transform: scale(0.7); %7D 65%25 %7B opacity: 1; transform: scale(0.7); %7D 100%25 %7B opacity: 0; transform: scale(1); %7D %7D %3C/style%3E%3Cg class='container'%3E%3Ccircle class='dots' cx='30vw'/%3E%3Ccircle class='dots' cx='40vw'/%3E%3Ccircle class='dots' cx='50vw'/%3E%3Ccircle class='dots' cx='60vw'/%3E%3Ccircle class='dots' cx='70vw'/%3E%3C/g%3E%3C/svg%3E%0A"
     alt="<%=SiteSetting.title%>"
   />
 
@@ -95,56 +90,5 @@
       }
     </style>
   </noscript>
-
-  <script>
-    const connectStart = performance?.timing?.connectStart || 0;
-
-    const SPLASH_DELAY = connectStart ? 2000 : 0;
-    const POLLING_INTERVAL = 50;
-
-    const targetTime = connectStart + SPLASH_DELAY;
-    const splashWrapper = document.querySelector("#d-splash");
-    const image = splashWrapper?.querySelector(".preloader-image");
-
-    let splashInterval;
-    let windowLoaded;
-
-    const swapSplash = () => {
-      splashWrapper?.style.setProperty("--animation-state", "running");
-
-      image.src = image.src.replace(
-        "--animation-state: paused;",
-        "--animation-state: running;"
-      );
-
-      clearSplashInterval();
-    };
-
-    const clearSplashInterval = () => {
-      clearInterval(splashInterval);
-      splashInterval = null;
-    };
-
-    (() => {
-      splashInterval = setInterval(() => {
-        if (windowLoaded) {
-          clearSplashInterval();
-        }
-
-        if (Date.now() > targetTime) {
-          swapSplash();
-        }
-      }, POLLING_INTERVAL);
-    })();
-
-    window.addEventListener(
-      "load",
-      () => {
-        windowLoaded = true;
-        splashWrapper?.remove();
-      },
-      { once: true }
-    );
-  </script>
 </section>
 <%- end %>

public/images/preloader.svg

@@ -1,9 +1,6 @@
-<svg
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" data-ember-extension="1">
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  version="1.1"
->
   <style>
+
     /* these need to be injected dynamicly to match theme colors */
     :root {
       --primary: #222222;
@@ -12,7 +9,6 @@
       --highlight: #f0ea88;
       --quaternary: #65ccff;
       --success: #009900;
-      --animation-state: paused;
     }
 
     /* these styles need to live here because the SVG has a different scope */
@@ -21,7 +17,7 @@
       animation-timing-function: ease-in-out;
       animation-duration: 3s;
       animation-iteration-count: infinite;
-      animation-play-state: var(--animation-state);
+      animation-delay: 1.5s;
       stroke: #fff;
       stroke-width: 0.5px;
       transform-origin: center;
@@ -32,26 +28,27 @@
 
     .dots:first-child {
       fill: var(--tertiary);
+      animation-delay: 1.25s;
     }
 
     .dots:nth-child(2) {
       fill: var(--tertiary);
-      animation-delay: 0.15s;
+      animation-delay: 1.35s;
     }
 
     .dots:nth-child(3) {
       fill: var(--highlight);
-      animation-delay: 0.3s;
+      animation-delay: 1.45s;
     }
 
     .dots:nth-child(4) {
       fill: var(--quaternary);
-      animation-delay: 0.45s;
+      animation-delay: 1.55s;
     }
 
     .dots:nth-child(5) {
       fill: var(--quaternary);
-      animation-delay: 0.6s;
+      animation-delay: 1.65s;
     }
 
     @keyframes loader {
@@ -75,10 +72,10 @@
   </style>
 
   <g class="container">
-    <circle class="dots" cx="30vw" />
+    <circle class="dots" cx="30vw"/>
-    <circle class="dots" cx="40vw" />
+    <circle class="dots" cx="40vw"/>
-    <circle class="dots" cx="50vw" />
+    <circle class="dots" cx="50vw"/>
-    <circle class="dots" cx="60vw" />
+    <circle class="dots" cx="60vw"/>
-    <circle class="dots" cx="70vw" />
+    <circle class="dots" cx="70vw"/>
   </g>
 </svg>