I'm trying to detect if a page has completely loaded, including network requests.
I'm currently using useLayoutEffect
which is great for detecting if the DOM has completely loaded, but I still have network fetches occuring on the page. I want to add an event listener to all images on the page, but can only do this once EVERYTHING has finished loading.
I do of course having loading states for individual component that exist on the page, but I need a global way of detecting if all components has finished loading, or that the page itself has finished loading.
Any suggestions appreciated.
I did also try to use the document.readyState but this appears to just behave the same way useLayoutEffect does in that it only detects DOM elements loaded.
document.readyState === 'complete'
Any help appreciated.
Thanks!