Add a better loading

src/Home.svelte

@@ -7,6 +7,7 @@
   import * as nip19 from 'nostr-tools/nip19'
   import { Splide, SplideSlide } from '@splidejs/svelte-splide';
   import '@splidejs/svelte-splide/css';
+  import Loading from './Loading.svelte';
 
   let events = [];
   let shortEvents = [];
@@ -226,5 +227,5 @@
       </div>
     {/if}
   {:else}
-    <p>Loading...</p>
+    <Loading />
   {/if}

src/Loading.svelte

@@ -0,0 +1,51 @@
+<script>
+  // No JavaScript logic is needed for this simple loading animation
+</script>
+
+<style>
+
+.loader-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .loader {
+    display: inline-block;
+    width: 92px;
+    height: 92px;
+    opacity: 0; /* Initially invisible */
+    animation: fade-in 0.5s 0.4s forwards, loader-animation 2s linear infinite 0.4s; /* Fade-in animation and delay for loader animation */
+  }
+
+  .loader:after {
+    content: " ";
+    display: block;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 6px solid #a9a9a9;
+    border-color: #a9a9a9 transparent #a9a9a9 transparent;
+    animation: loader-animation 2s linear infinite;
+  }
+
+  @keyframes loader-animation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes fade-in {
+    to {
+      opacity: 1;
+    }
+  }
+</style>
+
+<div class="loader-container">
+  <div class="loader"></div>
+</div>

src/Note.svelte

@@ -7,6 +7,7 @@
   import showdown from 'showdown';
   import * as nip19 from 'nostr-tools/nip19'
   import "zapthreads";
+  import Loading from './Loading.svelte';
 
   let relays;
   let note = {};
@@ -116,5 +117,5 @@
     <zap-threads anchor="{note1}" relays="{relays}" />
   {/if}
 {:else}
-  <p>Loading...</p>
+  <Loading />
 {/if}