Update loading store to be an object with loading and message with custom events.

src/lib/Loading.svelte

@@ -1,9 +1,22 @@
 <script lang="ts">
   import { loading } from '$lib/loading';
+
+  $: if ($loading.status === 'NAVIGATING') {
+    setTimeout(() => {
+      if ($loading.status === 'NAVIGATING') {
+        $loading.status = 'LOADING';
+      }
+    }, 400);
+  }
 </script>
 
-{#if $loading}
+{$loading.status}
+
+{#if $loading.status === 'LOADING'}
   <div />
+  {#if $loading.message}
+    <p>{$loading.message}</p>
+  {/if}
 {/if}
 
 <style>

src/lib/loading.ts

@@ -1,3 +1,30 @@
 import { writable } from "svelte/store";
 
-export const loading = writable(false);
+const newLoading = () => {
+  const { subscribe, update, set } = writable({
+    status: "IDLE", // IDLE, LOADING, NAVIGATING
+    message: ""
+  });
+
+  function setNavigate(isNavigating: boolean) {
+    update(() => {
+      return {
+        status: isNavigating ? 'NAVIGATING' : 'IDLE',
+        message: ''
+      }
+    });
+  }
+
+  function setLoading(isLoading: boolean, message = '') {
+    update(() => {
+      return {
+        status: isLoading ? 'LOADING' : 'IDLE',
+        message: isLoading ? message : ''
+      }
+    })
+  }
+
+  return { subscribe, update, set, setNavigate, setLoading };
+}
+
+export const loading = newLoading();

src/routes/__layout.svelte

@@ -4,15 +4,16 @@
   import { loading } from '$lib/loading';
   import Loading from '$lib/Loading.svelte';
 
-  $: $loading = !!$navigating;
+  // $: $loading = !!$navigating;
+  $: loading.setNavigate(!!$navigating);
 </script>
 
 {$loading}
 
 <slot />
 
-<button on:click={() => $loading = true}>Set Loading</button>
+<button on:click={() => loading.setLoading(true, "I'm loading")}>Set Loading</button>
 
-<button on:click={() => $loading = false}>Stop Loading</button>
+<button on:click={() => loading.setLoading(false)}>Stop Loading</button>
 
 <Loading />