로딩 상태를 처리하는 방법은 다양하지만, Svelte에서는 주로 상태 변수와 조건부 렌더링을 활용하여 처리합니다. 다음은 Svelte에서 로딩 상태를 처리하는 간단한 예제입니다.

먼저, Svelte 컴포넌트의 상태 변수로 ‘loading’이라는 boolean 값을 추가합니다.

<script>
  let loading = true;
  
  function loadData() {
    loading = true;

    // 데이터를 로드하는 비동기 함수
    fetchData().then(() => {
      loading = false;
    });
  }
</script>

위의 예제에서 loadData 함수는 fetchData 함수를 통해 데이터를 비동기적으로 로드합니다. 데이터 로딩이 시작되면 loading 변수를 true로 설정하고, 데이터 로딩이 끝나면 loading 변수를 false로 설정합니다.

이제 loading 변수를 활용하여 로딩 상태에 따라 조건부 렌더링을 수행할 수 있습니다. 예를 들어, 데이터가 로딩 중일 때는 로딩 스피너를 표시하고, 데이터 로딩이 끝나면 실제 데이터를 표시할 수 있습니다.

{#if loading}
  <div>Loading...</div>
{:else}
  <div>{data}</div>
{/if}

위의 예제에서는 loading 변수의 값에 따라 {#if}와 {:else} 블록이 조건부로 렌더링됩니다. loading 변수가 true인 경우 ‘Loading…’ 메시지를 표시하고, false인 경우 실제 데이터를 표시합니다.

이렇게 Svelte에서 로딩 상태를 처리할 수 있으며, 이 방법을 활용하여 원하는 로딩 인디케이터를 추가하거나 로딩 중에 사용자 상호작용을 제한하는 등의 작업을 수행할 수 있습니다.