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

* update styles

* remove unused code

* use request time as a baseline

public/images/preloader.svg

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