A way to control the page loading indicator

Currently our webapp has Javascript that loads the main document, after dom loaded event fires, to remove the loading indicator or loading “favicon”.

The problem with the page load indicator is that our app is downloading resources in background, and the loading icon does not go away. A hack around it is to include a small js file that executes on page load, which loads the main document.

The page load indicator gives a perception to the user that the page is slow, even though main content has loaded, and background prefetching is taking place.

Maybe the DOMContentLoaded event may be what you need here? Or is that what you are already using? Also what resources exactly are still being fetched in the background?

Does the indicator still spin when using standard ways of background fetching like <link rel="prefetch"> and a Service Worker adding things to the Cache API?

How exactly are you loading those resources?