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) 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.

Happy Hacking!