From d190264c864e50d8f23d2310c1d6f626a70f4d44 Mon Sep 17 00:00:00 2001
From: ZXY101 <tennershaun@gmail.com>
Date: Thu, 28 Sep 2023 07:55:16 +0200
Subject: [PATCH] Minor styling update

---
 src/lib/components/Catalog.svelte | 3 ++-
 src/lib/components/Loader.svelte  | 8 ++++++++
 src/routes/+page.svelte           | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/Loader.svelte

diff --git a/src/lib/components/Catalog.svelte b/src/lib/components/Catalog.svelte
index 2bd9eb7..5806af5 100644
--- a/src/lib/components/Catalog.svelte
+++ b/src/lib/components/Catalog.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { catalog } from '$lib/catalog';
   import CatalogItem from './CatalogItem.svelte';
+  import Loader from './Loader.svelte';
 </script>
 
 {#if $catalog}
@@ -18,5 +19,5 @@
     </div>
   {/if}
 {:else}
-  <p>Loading...</p>
+  <Loader>Fetching catalog...</Loader>
 {/if}
diff --git a/src/lib/components/Loader.svelte b/src/lib/components/Loader.svelte
new file mode 100644
index 0000000..6148a4c
--- /dev/null
+++ b/src/lib/components/Loader.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Spinner } from 'flowbite-svelte';
+</script>
+
+<div class="flex flex-col gap-5 items-center justify-center h-full p-10">
+  <Spinner size={'8'} />
+  <slot>Loading...</slot>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e3eea9d..a282226 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,6 +6,6 @@
   <title>Mokuro</title>
 </svelte:head>
 
-<div class="p-2">
+<div class="p-2 h-[90svh]">
   <Catalog />
 </div>