{#await/} 키워드를 사용하여 비동기 처리를 구현할 수 있다.
기본적으로는 비동기 처리로 사용할 수 있지만 다이나믹 컴포넌트로 사용할 수 있는 구조다.

{#await triggerUpdate(id)}
  <p>loading..</p>
{:then res}
  <svelte:component this={res.component} id={id}/>
{:catch error}
  <p>.error</p>
{/await}

<script>
export let type = 'apple'
export let id = undefined

// routes
const routes = {
  apple: import(`./apple.svelte`),
  banana: import(`./banana.svelte`),
  mango: import(`./mango.svelte`),
}

function sleep(ms = 1000)
{
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function triggerUpdate(_id)
{
  let result = {
    id: _id,
    component: (await routes[type]).default,
  }
  await sleep(1000)
  return result
}
</script>

id 값이 변할때마다 triggerUpdate() 비동기 함수가 실행되면서 loading, then, catch 화정까지 엘리먼트 영역에서 다 사용할 수 있으니 컴포넌트에서 가동성이 상당히 좋아진다.

출처: https://natclark.com/tutorials/svelte-async-components/