diff --git a/dashboard/src/lib/CardsHeader.svelte b/dashboard/src/lib/CardsHeader.svelte
index 2ae903fd..720cbc8e 100644
--- a/dashboard/src/lib/CardsHeader.svelte
+++ b/dashboard/src/lib/CardsHeader.svelte
@@ -29,8 +29,6 @@
     if (item.icon) altText = item.name ? `group ${item.name} icon (full size)` : "group icon (full size)";
     else if (item.proxy_tags) altText = item.name ? `member ${item.name} avatar (full size)` : "member avatar (full size)";
     else if (item.tag) altText = item.name ? `system ${item.name} avatar (full size)` : "system avatar (full size)";
-    
-    export let loading: boolean = false;
 
     async function focus(el) {
         await tick();
@@ -46,9 +44,6 @@
             <span bind:this={nameElement} style="vertical-align: middle;">{@html htmlName} ({item.id})</span>
         </div>
         <div>
-        {#if loading}
-        <div class="d-inline-block mr-5" style="vertical-align: middle;"><Spinner color="primary" /></div>
-        {/if}
         {#if item && (item.avatar_url || item.icon)}
         <img tabindex={0} on:keyup={(event) => {if (event.key === "Enter") avatarOpen = true}} on:click={toggleAvatarModal} class="rounded-circle avatar" src={icon_url} alt={altText} />
         {:else}
diff --git a/dashboard/src/lib/system/Edit.svelte b/dashboard/src/lib/system/Edit.svelte
index 5dcf59c8..b25137d2 100644
--- a/dashboard/src/lib/system/Edit.svelte
+++ b/dashboard/src/lib/system/Edit.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Row, Col, Input, Button, Label, Alert } from 'sveltestrap';
+    import { Row, Col, Input, Button, Label, Alert, Spinner } from 'sveltestrap';
     import autosize from 'svelte-autosize';
     // import moment from 'moment-timezone';
     import { currentUser } from '../../stores';
@@ -11,7 +11,7 @@
 
     export let editMode: boolean;
     export let user: System;
-    export let loading: boolean;
+    let loading: boolean;
 
     let err: string[] = [];
 
@@ -92,4 +92,5 @@
     <br>
     <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description}  aria-label="system description"/>
 </div>
-<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits">Submit</Button> <Button style="flex: 0" color="light" on:click={() => editMode = false} aria-label="cancel edits" >Back</Button>
\ No newline at end of file
+{#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits" >Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button>
+{:else}<Button style="flex: 0" color="primary" disabled  aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button>{/if}
\ No newline at end of file
diff --git a/dashboard/src/lib/system/Main.svelte b/dashboard/src/lib/system/Main.svelte
index 7b4f351b..f00645f1 100644
--- a/dashboard/src/lib/system/Main.svelte
+++ b/dashboard/src/lib/system/Main.svelte
@@ -10,14 +10,13 @@
 
     export let user: System;
     export let isPublic = true;
-    let loading = false;
 
     let editMode = false;
 </script>
 
 <Card class="mb-4">
     <CardHeader>
-        <CardsHeader bind:item={user} bind:loading>
+        <CardsHeader bind:item={user}>
             <FaAddressCard slot="icon" />
         </CardsHeader>
     </CardHeader>
@@ -25,7 +24,7 @@
         {#if !editMode}
         <Body bind:user bind:editMode bind:isPublic/>
         {:else}
-        <Edit bind:user bind:editMode bind:loading />
+        <Edit bind:user bind:editMode />
         {/if}
     </CardBody>
 </Card>
