From 0d5e30dddb3e27bfe9ff219ec0e53f7cd9c32ff3 Mon Sep 17 00:00:00 2001
From: M-ZubairAhmed <m-zubairahmed@protonmail.com>
Date: Thu, 13 Jun 2024 21:37:41 +0000
Subject: [PATCH] [MM-58456] Make react library be loaded at DOMContentLoaded
 instead of onload (#27192)

---
 webapp/channels/src/entry.tsx | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/webapp/channels/src/entry.tsx b/webapp/channels/src/entry.tsx
index f3a92426cf72a..edbe885a42174 100644
--- a/webapp/channels/src/entry.tsx
+++ b/webapp/channels/src/entry.tsx
@@ -28,7 +28,7 @@ declare global {
 
 // This is for anything that needs to be done for ALL react components.
 // This runs before we start to render anything.
-function preRenderSetup(callwhendone: () => void) {
+function preRenderSetup(onPreRenderSetupReady: () => void) {
     window.onerror = (msg, url, line, column, error) => {
         if (msg === 'ResizeObserver loop limit exceeded') {
             return;
@@ -47,11 +47,13 @@ function preRenderSetup(callwhendone: () => void) {
             ),
         );
     };
+
     setCSRFFromCookie();
-    callwhendone();
+
+    onPreRenderSetupReady();
 }
 
-function renderRootComponent() {
+function renderReactRootComponent() {
     ReactDOM.render((
         <App/>
     ),
@@ -59,22 +61,19 @@ function renderRootComponent() {
 }
 
 /**
- * Adds a function to be invoked onload appended to any existing onload
- * event handlers.
+ * Adds a function to be invoked when the DOM content is loaded.
  */
-function appendOnLoadEvent(fn: (evt: Event) => void) {
-    if (window.onload) {
-        const curronload = window.onload;
-        window.onload = (evt) => {
-            (curronload as any)(evt);
-            fn(evt);
-        };
+function appendOnDOMContentLoadedEvent(onDomContentReady: () => void) {
+    if (document.readyState === 'loading') {
+        // If the DOM hasn't finished loading, add an event listener and call the function when it does
+        document.addEventListener('DOMContentLoaded', onDomContentReady);
     } else {
-        window.onload = fn;
+        // If the DOM is already loaded, call the function immediately
+        onDomContentReady();
     }
 }
 
-appendOnLoadEvent(() => {
-    // Do the pre-render setup and call renderRootComponent when done
-    preRenderSetup(renderRootComponent);
+appendOnDOMContentLoadedEvent(() => {
+    // Do the pre-render setup and call renderReactRootComponent when done
+    preRenderSetup(renderReactRootComponent);
 });