A short guide to Async Components in Svelte 5

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)

  export let info;

   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}

What's happening here?

• 
  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}: Svelte 5 introduces {@const} within templating blocks, which allows you to extract the default export (M.default) into a local variable.

Pro tip: Keep async operations out of $effect runes – they don't play well together, and TypeScript will let you know about it.

Happy Hacking!