A short guide to Async Components in Svelte 5

#svelte #webcomponents #tutorial #javascript

I couldn't find any working solution for this online, so I thought to share it when I got it to work.

The Problem: Asynchronous Components

I needed a maintenance page that would take over the entire site when enabled, but loading it on every page visit seemed wasteful. The component should only load when actually needed.

The Solution: Combining {#await} with Dynamic Imports

The {#await} block in Svelte lets you handle promises right in your template. Pair that with dynamic import() for lazy-loading, and you've got yourself a concise and clear way to handle async components.

Here's the code:

<script>
  // info.maintenance (boolean) && info.maintenance_ends (timestamp)
  let { info } = $props();
   const MaintenanceComponent = info?.maintenance 
    ? import("$lib/components/Maintenance.svelte")
    : null;
</script>

{#if MaintenanceComponent}
  {#await MaintenanceComponent then M}
    {@const Maintenance = M.default}
    <Maintenance time={info.maintenance_ends} />
  {:catch error}
    <p>Failed to load maintenance page: {error.message}</p>
  {/await}
{/if}

Dynamic Import: I used import() to load the Maintenance.svelte component asynchronously. This makes sure the component is only loaded when maintenance mode is turned on.
{#await} Block: This block allows me to await the import.
{@const}: The {@const}block allows you to extract the default export (M.default) into a local variable.