[MM-58456] Make react library be loaded at DOMContentLoaded instead of onload (#27192)

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
+ * Adds a function to be invoked when the DOM content is loaded.
- * event handlers.
  */
-function appendOnLoadEvent(fn: (evt: Event) => void) {
+function appendOnDOMContentLoadedEvent(onDomContentReady: () => void) {
-    if (window.onload) {
+    if (document.readyState === 'loading') {
-        const curronload = window.onload;
+        // If the DOM hasn't finished loading, add an event listener and call the function when it does
-        window.onload = (evt) => {
+        document.addEventListener('DOMContentLoaded', onDomContentReady);
-            (curronload as any)(evt);
-            fn(evt);
-        };
     } else {
-        window.onload = fn;
+        // If the DOM is already loaded, call the function immediately
+        onDomContentReady();
     }
 }
 
-appendOnLoadEvent(() => {
+appendOnDOMContentLoadedEvent(() => {
-    // Do the pre-render setup and call renderRootComponent when done
+    // Do the pre-render setup and call renderReactRootComponent when done
-    preRenderSetup(renderRootComponent);
+    preRenderSetup(renderReactRootComponent);
 });