Merge pull request #222 from Shifin-Malik/loading-animation

feat(loading-animation): add loading-animation

src/App.svelte

@@ -12,16 +12,20 @@
   import LicenseDialog from '@/components/LicenseDialog.svelte';
   import GoToDialog from '@/components/GoToDialog.svelte';
   import FindDialog from '@/components/FindDialog.svelte';
+  import Loading from '@/components/Loading.svelte';
 </script>
 
-{#await Notpad.init() then}
+{#await Notpad.init()}
+  <!-- Loading Animation -->
+  <Loading />
+{:then}
   <!-- Actual UI -->
   <div class="flex h-full flex-col">
     <MenuBar />
     <EditorTabs />
   </div>
 
-  <!-- Procedually -->
+  <!-- Additional Components -->
   <FontDialog />
   <LicenseDialog />
   <AboutDialog />

src/lib/components/DownloadButton.svelte

@@ -26,7 +26,10 @@
       .flatMap((release) => release.assets)
       .sort((a, b) => a.name.localeCompare(b.name))}
 
-    <div transition:slide|global class="absolute right-1 top-1/2 -translate-y-1/2 transform">
+    <div
+      transition:slide|global
+      class="absolute right-1 top-1/2 -translate-y-1/2 transform max-lg:hidden"
+    >
       <Menubar.Menu>
         <Menubar.Trigger>Download</Menubar.Trigger>
         <Menubar.Content>

src/lib/components/Loading.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { mode } from 'mode-watcher';
+  import { fade } from 'svelte/transition';
+  import appIconLight from '@/src/assets/images/Notpad Logo Light.svg';
+  import appIconDark from '@/src/assets/images/Notpad Logo Dark.svg';
+</script>
+
+<div
+  transition:fade
+  class="fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 flex
+  flex-col items-center justify-center bg-primary-foreground"
+>
+  <img class="w-20 animate-pulse" alt="icon" src={$mode == 'dark' ? appIconDark : appIconLight} />
+</div>