From adb7fa5e2fc51308efc9fc4ee57ecb1c15a85cfa Mon Sep 17 00:00:00 2001
From: Joe <33972521+hnb-ku@users.noreply.github.com>
Date: Fri, 1 Jul 2022 21:54:38 +0800
Subject: [PATCH] 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 |  6 ++++++
 app/views/common/_discourse_splash.html.erb | 13 ++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/app.js b/app/assets/javascripts/discourse/app/app.js
index 19da3d28362..a7df43a1715 100644
--- a/app/assets/javascripts/discourse/app/app.js
+++ b/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) {
diff --git a/app/views/common/_discourse_splash.html.erb b/app/views/common/_discourse_splash.html.erb
index 3b36873b18b..fbe8ac931c9 100644
--- a/app/views/common/_discourse_splash.html.erb
+++ b/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 }
       );