FIX: Defer removing the splash screen until the window load event fires take 3 (#17238)

We currently remove the splash screen once Discourse starts booting.

This can be an issue on very slow devices, which can take up to 6 seconds. This PR ensures that we don't remove the splash until the browser has finished parsing all of the site's assets. It won't impact fast devices.

Internal topic /t/65378/60

public/images/preloader.svg

@@ -1,12 +1,8 @@
-<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" data-ember-extension="1">
   <style>
+
+    /* these need to be injected dynamicly to match theme colors */
     :root {
-      /* these need to be injected dynamicly to match theme colors */
       --primary: #222222;
       --secondary: #ffffff;
       --tertiary: #f15c21;
@@ -32,46 +28,43 @@
 
     .dots:first-child {
       fill: var(--tertiary);
-      animation-delay: 1s;
+      animation-delay: 1.25s;
     }
 
     .dots:nth-child(2) {
       fill: var(--tertiary);
-      animation-delay: 1.1s;
+      animation-delay: 1.35s;
     }
 
     .dots:nth-child(3) {
       fill: var(--highlight);
-      animation-delay: 1.2s;
+      animation-delay: 1.45s;
     }
 
     .dots:nth-child(4) {
       fill: var(--quaternary);
-      animation-delay: 1.3s;
+      animation-delay: 1.55s;
     }
 
     .dots:nth-child(5) {
       fill: var(--quaternary);
-      animation-delay: 1.4s;
+      animation-delay: 1.65s;
     }
 
     @keyframes loader {
-      15% {
+      0% {
         opacity: 0;
         transform: scale(1);
       }
-
       45% {
         opacity: 1;
         transform: scale(0.7);
       }
-
       65% {
         opacity: 1;
         transform: scale(0.7);
       }
-
-      95% {
+      100% {
         opacity: 0;
         transform: scale(1);
       }
@@ -79,10 +72,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>