How to show a loading state in sveltekit correctly?

I want to show a spinner in +layout.svelte, while the +page.js is fetching data. With the code below the navigating is not available until all api calls have finished. After the loading I see the console.log.

What ist wrong? How can I show the loading state correctly?

+layout.svelte

<script>  import { navigating } from '$app/stores';  console.log(navigating)</script><main>      {#if $navigating}<Spinner />      {:else}<slot />      {/if}</main>