From ddc65fbbfb47c91ec5b71a509843dc69d96b9acb Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Fri, 11 Feb 2022 14:18:02 -0800
Subject: [PATCH] Update loading store to be an object with loading and message
 with custom events.

---
 src/lib/Loading.svelte     | 15 ++++++++++++++-
 src/lib/loading.ts         | 29 ++++++++++++++++++++++++++++-
 src/routes/__layout.svelte |  7 ++++---
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/lib/Loading.svelte b/src/lib/Loading.svelte
index 3e8c110..81a3a22 100644
--- a/src/lib/Loading.svelte
+++ b/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>
diff --git a/src/lib/loading.ts b/src/lib/loading.ts
index a4af691..a38c268 100644
--- a/src/lib/loading.ts
+++ b/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();
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 37329a1..81ad6ce 100644
--- a/src/routes/__layout.svelte
+++ b/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 />
\ No newline at end of file