Lazy loading always shows loading

[unbiased-dev]

Hi

the current suggestion for lazy loading is to write your tiny "Lazy.svelte"

<!-- Lazy.svelte-->
<script>
    export let component;
</script>

{#await component.then ? component : component()}
    Loading component...
{:then Cmp}
   <svelte:component this={Cmp.default} />
{/await}

This works, however, after first fetch of a Lazy wrapped component, renavigating to it still triggers the import and shows the Loading component.... Even tho it resolves instantly as the file is pulled from cache by the browser, the flash of swapping components is still pretty glaring.

Is this fixable/avoidable?

[AlexxNB]

As you see the "Loading..." promise is not resolves immediately even in case of cached resources. You may try add something with timer (show "Loading..." after 500ms for example)

[AlexxNB]

The tick function from svelte package also might work (I didn't test in real):

<script>
    import {tick} from 'svelte';

    export let component;
</script>

{#await component.then ? component : component()}
    {#await tick()}
        Loading component...
    {/await}
{:then Cmp}
   <svelte:component this={Cmp.default} />
{/await}