Add Saving Icon

src/lib/Others/AccountWarningComp.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-  import { AlertOctagon } from "lucide-svelte";
-  import { alertMd } from "src/ts/alert";
-  import { AccountWarning } from "src/ts/storage/accountStorage";
-
-</script>
-<button class="absolute top-2 right-2 z-10 text-white bg-red-800 hover:bg-red-600 p-2 rounded" onclick={() =>{
-    alertMd($AccountWarning)
-    $AccountWarning = ''
-}}>
-    <AlertOctagon size={24} />
-</button>

src/lib/Others/SavePopupIcon.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { AlertOctagon, SaveIcon } from "lucide-svelte";
+  import { alertMd } from "src/ts/alert";
+  import { saving } from "src/ts/globalApi.svelte";
+  import { AccountWarning } from "src/ts/storage/accountStorage";
+  import { DBState } from "src/ts/stores.svelte";
+
+</script>
+
+{#if DBState?.db?.showSavingIcon && saving.state}
+  <div
+    class="absolute top-3 right-3 z-10 text-white p-2 rounded bg-gradient-to-br from-blue-500 to-purple-800 saving-animation pointer-events-none opacity-15"
+  >
+    <SaveIcon size={24} />
+  </div>
+{:else if $AccountWarning}
+  <button class="absolute top-3 right-3 z-10 text-white bg-red-800 hover:bg-red-600 p-2 rounded" onclick={() =>{
+      alertMd($AccountWarning)
+      $AccountWarning = ''
+  }}>
+      <AlertOctagon size={24} />
+  </button>
+{/if}
+
+<style>
+  .saving-animation {
+    animation: saving-anime 1s infinite;
+    background-size: 200% auto;
+  }
+
+  @keyframes saving-anime {
+    0% {
+      background-position: 0 0;
+    }
+    50% {
+      background-position: 100% 100%;
+    }
+    100% {
+      background-position: 0 0;
+    }
+  }
+</style>