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

This commit is contained in:
M-ZubairAhmed 2024-06-13 21:37:41 +00:00 committed by GitHub
parent a88f283ef7
commit 0d5e30dddb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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);
});