I want to create a simple spinner for my SvelteKit pages, but I'm unsure of the best approach. The goal is to display a loading spinner when the page loads a maplibre map. If the loading process fails, I need it to retry after 5 seconds. Even after the map is loaded, I still need to show the spinner as additional data is fetched. Again, if the request fails, it should keep retrying until successful. The spinner should only hide once everything has been successfully loaded.
Here's a snippet of the code:
onMount(() => {
let map = new Map({}); //maplibre map
map.on('load', function(){
let data = fetch('url').catch((e)=>{
//retry additional load in 5 sec.
});
});
map.on('error', function(){
//retry map load in 5 sec.
});
});
The retry logic adds complexity as I have to handle keeping references to each loading function and calling them again. Are there any best practices or established solutions for this kind of scenario?