In Sapper I am trying to import a component only if being rendered client side (using onMount
). Is there something similar to React Suspense
and React.lazy
? Or is there another approach?
2
votes
1 Answers
5
votes
You can certainly do it that way, yes:
<script>
import { onMount } from 'svelte';
let Thing;
onMount(async () => {
Thing = (await import('./Thing.svelte')).default;
});
</script>
<svelte:component this={Thing} answer={42}>
<p>some slotted content</p>
</svelte:component>
Alternatively, you could wrap that into a component:
<!-- Loader.svelte -->
<script>
import { onMount } from 'svelte';
let loader;
let Component;
onMount(async () => {
Component = (await loader()).default;
});
export { loader as this };
</script>
<svelte:component this={Component} {...$$restProps}>
<slot></slot>
</svelte:component>
{#if !Component}
<slot name="fallback"></slot>
{/if}
<Loader
this={() => import('./Thing.svelte')}
answer={42}
>
<p>some slotted content</p>
<p slot="fallback">loading...</p>
</Loader>
Demo here. A caveat with this approach is that slots other than default
won't be 'forwarded' to the underlying component.