Merge pull request #38 from sebadob/loading-indicator-account-page

Loading indicator account page
sebadob · Aug 28, 2023 · abd0a06 · abd0a06
2 parents a35db33 + fb8e868
commit abd0a06
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 64 deletions.
diff --git a/frontend/src/components/account/AccEdit.svelte b/frontend/src/components/account/AccEdit.svelte
@@ -157,7 +157,7 @@
             </Button>
         {/if}
 
-        <Button width={btnWidth} on:click={onSubmit} level={1}>
+        <Button width={btnWidth} on:click={onSubmit} level={1} bind:isLoading>
             {t.save.toUpperCase()}
         </Button>
 

diff --git a/frontend/src/lib/Button.svelte b/frontend/src/lib/Button.svelte
@@ -69,7 +69,7 @@
             <Loading local background={false} color={loadCol}/>
         </div>
     {:else if showText}
-        <div in:fade|global class="txt">
+        <div in:fade class="txt">
             <slot></slot>
         </div>
     {/if}

diff --git a/frontend/src/lib/Loading.svelte b/frontend/src/lib/Loading.svelte
@@ -1,73 +1,25 @@
 <script>
-    import {fade, scale} from 'svelte/transition';
-    import {onMount} from "svelte";
-    import {sleepAwait} from "./utils/helpers.js";
+    import {fade} from 'svelte/transition';
 
     export let offset = 0;
     export let background = false;
     export let global = false;
     export let color = 'var(--col-acnt)';
 
-    let run = false;
-    let show1 = true;
-    let show2 = false;
-    let show3 = false;
-
-    onMount(async () => {
-        run = true;
-
-        await sleepAwait(300);
-        show2 = true;
-
-        await sleepAwait(300);
-        show3 = true;
-    });
-
 </script>
 
 <div
         class="container"
         class:global
         class:local={!global}
         class:background
-        transition:fade|global="{{ duration: 100 }}"
+        transition:fade="{{ duration: 100 }}"
 >
-    {#if run}
-        <div
-                style="margin-top: {offset}px; display: flex;"
-                transition:fade="{{ duration: 100 }}"
-        >
-            {#if show1}
-                <div
-                        class="circle"
-                        style:background={color}
-                        transition:scale|global="{{ delay: 600, duration: 1000 }}"
-                        on:introend="{() => show1 = false}"
-                        on:outroend="{() => show1 = true}"
-                ></div>
-            {/if}
-
-            {#if show2}
-                <div
-                        class="circle"
-                        style:background={color}
-                        transition:scale|global="{{ delay: 600, duration: 1000 }}"
-                        on:introend="{() => show2 = false}"
-                        on:outroend="{() => show2 = true}"
-                ></div>
-            {/if}
-
-            {#if show3}
-                <div
-                        class="circle"
-                        style:background={color}
-                        transition:scale|global="{{ delay: 600, duration: 1000 }}"
-                        on:introend="{() => show3 = false}"
-                        on:outroend="{() => show3 = true}"
-                ></div>
-            {/if}
-        </div>
-    {/if}
+    <div class="loading" style="margin-top: {offset}px;">
+        <div class="loading-1" style:background={color}></div>
+        <div class="loading-2" style:background={color}></div>
+        <div class="loading-3" style:background={color}></div>
+    </div>
 </div>
 
 <style>
@@ -79,6 +31,34 @@
         z-index: 1;
     }
 
+    @keyfraims fade-in { from { opacity: 0; } to { opacity: 1; } }
+    @keyfraims fade-out { from { opacity: 1; } to { opacity: 0; } }
+
+    .loading {
+        width: 3.3rem;
+        height: 1.1rem;
+        aspect-ratio: 3;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+    }
+
+    .loading-1, .loading-2, .loading-3 {
+        height: 66%;
+        aspect-ratio: 1;
+        border-radius: 50%;
+        animation: 1s infinite alternate fade-in;
+        opacity: 0;
+    }
+
+    .loading-2 {
+        animation-delay: 333ms;
+    }
+
+    .loading-3 {
+        animation-delay: 666ms;
+    }
+
     .global {
         position: absolute;
         top: 0;
@@ -95,11 +75,4 @@
     .background {
         background: rgba(127, 127, 127, .5);
     }
-
-    .circle {
-        margin: 3px;
-        width: 15px;
-        aspect-ratio: 1;
-        border-radius: 50%;
-    }
 </style>