UX: Use discourse-ready as a baseline for removing the splash (#17297)

We previously used the window load event as a target to remove the splash. The issue with that is that it means we wait for images to download before we remove the splash.

Ember has a better method that we can use ready(). This PR triggers a custom discourse-ready when that happens and uses that as the baseline for removing the splash.

This PR also adds three new performance marks. discourse-ready, discourse-splash-visible, and discourse-splash-removed

These will help us keep track of performance.

Internal topic /t/65378/81

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

@@ -86,6 +86,12 @@ const Discourse = Application.extend({
   _registerPluginCode(version, code) {
     _pluginCallbacks.push({ version, code });
   },
+
+  ready() {
+    performance.mark("discourse-ready");
+    const event = new CustomEvent("discourse-ready");
+    document.dispatchEvent(event);
+  },
 });
 
 function moduleThemeId(moduleName) {

app/views/common/_discourse_splash.html.erb

@@ -109,7 +109,7 @@
       const targetTime = connectStart + DELAY_TARGET;
 
       let splashInterval;
-      let windowLoaded;
+      let discourseReady;
 
       const swapSplash = () => {
         splashWrapper?.style.setProperty("--animation-state", "running");
@@ -119,6 +119,8 @@
           "--animation-state: running;"
         );
 
+        performance.mark("discourse-splash-visible");
+
         clearSplashInterval();
       };
 
@@ -129,7 +131,7 @@
 
       (() => {
         splashInterval = setInterval(() => {
-          if (windowLoaded) {
+          if (discourseReady) {
             clearSplashInterval();
           }
 
@@ -139,11 +141,12 @@
         }, POLLING_INTERVAL);
       })();
 
-      window.addEventListener(
-        "load",
+      document.addEventListener(
+        "discourse-ready",
         () => {
-          windowLoaded = true;
+          discourseReady = true;
           splashWrapper?.remove();
+          performance.mark("discourse-splash-removed");
         },
         { once: true }
       );