Svelte Conditional Component rendering

Question

I have a basic if/else in the app to show either a preloader or a component.

{#if preloading}
    <video />
{:else}
    <svelte:component this={component} on:preload={preload}/>
{/if}

It starts with displaying the component correctly, when the preload flag is set, it shows the video, but it shows it over the svelte:component rather than replacing it.

I tried using {#key} to force a rerender by using a number as an id and incrementing it when preload is set, but the component is still there.

Any ideas?

question from:https://stackoverflow.com/questions/65905277/svelte-conditional-component-rendering

Answer 1

Try doing it like in the example page:

<script>
  import video from "./somewhere.svelte"
  import component from "./somewhereelse.svelte" 
</script>

<svelte:component this={preloading ? video : component} on:preload={preload}/>