SSR for dynamically imported component

[Tiim]

I have the following component icon.svelte which dynamically imports the correct icon component and renders it:

<script>
	export let icon;
	$: component = getIconComponent(icon);

	async function getIconComponent(icon) {
		return (await import(`../images/icons/${icon}.svg`)).default;
	}
</script>

<span class="icon-wrap">
	{#await component then c}
		<svelte:component this={c} />
	{:catch e}
		<span>{icon}</span>
	{/await}
</span>

This works fine on the client side. On the server however the component is not awaited and therefore nothing is rendered.

Is there a way to make the server wait until the #await has resolved?

[eltigerchino]

I think the server doesn't render anything because the promise does not resolve.

Currently you have states for when it resolves or errors out:

{#await component then c}
  // resolved
		<svelte:component this={c} />
{:catch e}
  // rejects
		<span>{icon}</span>
{/await}

But not while awaiting:

{#await component}
  // displays while awaiting
{:then c}
  // resolved
{:catch e}
  // rejects
{/await}

[Tiim]

Yes, but I would like to render the resolved component, not the loading indicator. Since its just a simple svg icon it makes no sense to only load it on the client side.

[eltigerchino]

it makes no sense to only load it on the client side.

I could be mistaken, but I don't think {#await} blocks run during SSR.

I can't find anything in the docs about this, so I'm probably wrong. But I've always used await blocks for CSR specific content.

[eltigerchino]

Found a thread that may be related to your issue:

sveltejs/svelte#5501 (comment)

[Tiim]

Looks like this is exacly my issue :)
I hope that is something that will be implemented one day

[yousufiqbal]

Why not do your thing this way:

<script>
  export let icon, width = '1em', style = ''

  let icons = {
    'shopping-cart': '<path fill="currentColor" d="M4 16V4H2V2h3a1 1 0 0 1 1 1v12h12.438l2-8H8V5h13.72a1 1 0 0 1 .97 1.243l-2.5 10a1 1 0 0 1-.97.757H5a1 1 0 0 1-1-1zm2 7a2 2 0 1 1 0-4a2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4a2 2 0 0 1 0 4z"></path>',
    'search-2': '<path fill="currentColor" d="M11 2c4.968 0 9 4.032 9 9s-4.032 9-9 9s-9-4.032-9-9s4.032-9 9-9zm0 16c3.867 0 7-3.133 7-7c0-3.868-3.133-7-7-7c-3.868 0-7 3.132-7 7c0 3.867 3.132 7 7 7zm8.485.071l2.829 2.828l-1.415 1.415l-2.828-2.829l1.414-1.414z"></path>',
    'arrow-left': '<path fill="currentColor" d="M7.828 11H20v2H7.828l5.364 5.364l-1.414 1.414L4 12l7.778-7.778l1.414 1.414z"></path>',
    'blaze': '<path fill="currentColor" d="M19 9c.667 1.06 1 2.394 1 4c0 3-3.5 4-5 9c-.667-.575-1-1.408-1-2.5c0-3.482 5-5.29 5-10.5zm-4.5-4a8.31 8.31 0 0 1 1 4c0 5-6 6-4 13C9.833 20.84 9 19.173 9 17c0-3.325 5.5-6 5.5-12zM10 1c.667 1.333 1 2.833 1 4.5c0 6-9 7.5-3 16.5c-2.5-.5-4.5-3-4.5-6C3.5 9.5 10 8.5 10 1z"></path>',
    'home-3': '<path fill="currentColor" d="M19 21H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9a1 1 0 0 1-1 1zM6 19h12V9.157l-6-5.454l-6 5.454V19zm2-4h8v2H8v-2z"></path>',
  }
</script>

<svg width="{width}" height="{width}" {style} viewBox="0 0 24 24">
  {@html icons[icon]}
</svg>

This works in SSR and is more managable.

[Tiim]

If there is no way to dynamically load a component during SSR, I will probably solve it like this.