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>

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -202,7 +202,7 @@
     <SliderInput  min={50} max={200} bind:value={DBState.db.zoomsize} marginBottom/>
 
     <span class="text-textcolor">{language.lineHeight}</span>
-    <SliderInput  min={0.5} max={3} step={0.05} bind:value={DBState.db.lineHeight} marginBottom/>
+    <SliderInput  min={0.5} max={3} step={0.05} fixed={2} bind:value={DBState.db.lineHeight} marginBottom/>
 
     <span class="text-textcolor">{language.iconSize}</span>
     <SliderInput min={50} max={200} bind:value={DBState.db.iconsize} marginBottom/>
@@ -300,6 +300,10 @@
         <Check bind:check={DBState.db.textScreenRounded} name={language.textScreenRound}/>
     </div>
 
+    <div class="flex items-center mt-2">
+        <Check bind:check={DBState.db.showSavingIcon} name={language.showSavingIcon}/>
+    </div>
+
     {#if DBState.db.textScreenBorder}
         <div class="flex items-center mt-2">
             <Check check={true} onChange={() => {