htmltypescriptsveltekitsvelte-transition

How to meet user with loader and in background load all another data in svelte?

I have a large animated content in Three.js written on Svelte, and I need to display a loader that wraps whole view until all packages and animations are loaded. But i need to make loader load first, and then only start loading rest components

I have some thought how to realize it in this sample

<script>
...
let startLoad = false
let loaded = false
onMount(() => startLoad = true)) // or add SetTimout to 1 millisecond that makes start true


</script> 
{#if !loaded} 
<p> loading <p> // this content wraps whole site with custom loader
{/if}
{#if startLoad}
<SomeComponentWithHugeAnimation onLoaded="()=> loaded=true"> 
{/if}

if you have better ideas, list them please

Ideas to how to realize this, wrapper loading to not

Solution

  • I did as above, but also added suspend from threlte to track isLoadedfrom store on gltf file load.