From 85a758ee15f9198b049ed028cffe3bcaee2411e0 Mon Sep 17 00:00:00 2001
From: Spectralitree <72747870+Spectralitree@users.noreply.github.com>
Date: Thu, 30 Dec 2021 10:22:08 +0100
Subject: [PATCH] feat: move loading spinner from top of card to submit button

---
 src/lib/group/Body.svelte       | 10 ++++------
 src/lib/group/Edit.svelte       |  7 ++++---
 src/lib/group/List.svelte       | 11 ++++-------
 src/lib/group/MemberEdit.svelte |  2 +-
 src/lib/group/Privacy.svelte    |  6 ++++--
 src/lib/member/Body.svelte      |  6 ++----
 src/lib/member/GroupEdit.svelte |  2 +-
 src/lib/member/List.svelte      |  8 +++-----
 8 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/src/lib/group/Body.svelte b/src/lib/group/Body.svelte
index 6f77ef30..8527a0af 100644
--- a/src/lib/group/Body.svelte
+++ b/src/lib/group/Body.svelte
@@ -13,8 +13,6 @@
     let editMode: boolean = false;
     let memberMode: boolean = false;
     export let isPublic: boolean;
-    export let loading: boolean = false;
-    let privacyLoading = false;
     export let members: Member[];
 
     let htmlDescription: string;
@@ -88,10 +86,10 @@
         <b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
         <Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
             <ModalHeader toggle={togglePrivacyModal}>
-                {#if privacyLoading}<div style="float: left; width: 3rem;"><Spinner color="primary" /></div>{/if} Edit privacy
+               Edit privacy
             </ModalHeader>
                 <ModalBody>
-                    <Privacy on:update bind:group bind:privacyOpen={privacyOpen} bind:loading={privacyLoading} />
+                    <Privacy on:update bind:group bind:privacyOpen={privacyOpen}/>
                 </ModalBody>
         </Modal>
     </Col>
@@ -108,8 +106,8 @@
 <Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button> <Button style="flex: 0" color="secondary" on:click={() => memberMode = true}>Members</Button>
 {/if}
 {:else if editMode}
-<Edit on:update bind:loading bind:group bind:editMode />
+<Edit on:update bind:group bind:editMode />
 {:else if memberMode}
-    <MemberEdit on:update bind:loading bind:group bind:memberMode bind:members />
+    <MemberEdit on:update bind:group bind:memberMode bind:members />
 {/if}
 </CardBody>
\ No newline at end of file
diff --git a/src/lib/group/Edit.svelte b/src/lib/group/Edit.svelte
index 0ab8794e..ed6a2a3a 100644
--- a/src/lib/group/Edit.svelte
+++ b/src/lib/group/Edit.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { Row, Col, Input, Button, Label, Alert } from 'sveltestrap';
+    import { Row, Col, Input, Button, Label, Alert, Spinner } from 'sveltestrap';
     import { createEventDispatcher } from 'svelte';
     import Group from '../../api/group';
     import PKAPI from '../../api';
     import autosize from 'svelte-autosize';
 
-    export let loading: boolean = false;
+    let loading: boolean = false;
     export let group: Group;
     export let editMode: boolean;
 
@@ -81,4 +81,5 @@
     <b>Description:</b><br />
     <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={group.description}/>
 </div>
-<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button>
\ No newline at end of file
+{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button>
+{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>{/if}
\ No newline at end of file
diff --git a/src/lib/group/List.svelte b/src/lib/group/List.svelte
index e547c117..3f258340 100644
--- a/src/lib/group/List.svelte
+++ b/src/lib/group/List.svelte
@@ -161,9 +161,6 @@
     'member-list': memberListRenderer
   });
 
-  let itemLoading: boolean[] = [];
-  $: itemLoading.length = slicedList.length;
-
   function updateList(event: any) {
       list = list.map(group => group.id !== event.detail.id ? group : event.detail)
   }
@@ -274,17 +271,17 @@
     {#each slicedList as group, index (group.id)}
         {#if (!isPublic && group.privacy.visibility === "public") || isPublic}
         <AccordionItem>
-            <CardsHeader bind:item={group} loading={itemLoading[index]} slot="header">
+            <CardsHeader bind:item={group} slot="header">
                 <FaUsers slot="icon" />
             </CardsHeader>
-            <Body on:update={updateList} bind:members bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/>
+            <Body on:update={updateList} bind:members bind:group bind:isPublic={isPublic}/>
         </AccordionItem>
         {:else}
         <AccordionItem>
-            <CardsHeader bind:item={group} loading={itemLoading[index]} slot="header">
+            <CardsHeader bind:item={group} slot="header">
                 <FaLock slot="icon" />
             </CardsHeader>
-            <Body on:update={updateList} bind:members bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/>
+            <Body on:update={updateList} bind:members bind:group bind:isPublic={isPublic}/>
         </AccordionItem>
         {/if}
     {/each}
diff --git a/src/lib/group/MemberEdit.svelte b/src/lib/group/MemberEdit.svelte
index 4fbf7eee..0d2caf59 100644
--- a/src/lib/group/MemberEdit.svelte
+++ b/src/lib/group/MemberEdit.svelte
@@ -11,7 +11,7 @@
     import FaUserMinus from 'svelte-icons/fa/FaUserMinus.svelte'
     import Svelecte, { addFormatter } from 'svelecte';
 
-    export let loading: boolean;
+    let loading: boolean = false;
     export let group: Group;
     export let memberMode: boolean = true;
     export let members: Member[];
diff --git a/src/lib/group/Privacy.svelte b/src/lib/group/Privacy.svelte
index 6861de91..d331aa82 100644
--- a/src/lib/group/Privacy.svelte
+++ b/src/lib/group/Privacy.svelte
@@ -9,7 +9,7 @@
     const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
     
     let err: string;
-    export let loading = false;
+    let loading = false;
 
     let allPrivacy: string;
 
@@ -93,4 +93,6 @@
             </Input>
         </Col>
     </Row>
-    <Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal}>Back</Button>
\ No newline at end of file
+    {#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal}>Back</Button>
+    {:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/>></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+    {/if}
\ No newline at end of file
diff --git a/src/lib/member/Body.svelte b/src/lib/member/Body.svelte
index 9d2c26d1..5a899cb0 100644
--- a/src/lib/member/Body.svelte
+++ b/src/lib/member/Body.svelte
@@ -10,12 +10,10 @@
 
     export let groups: Group[] = [];
     export let member: Member;
-    export let loading: boolean;
     export let isPublic: boolean = false;
 
     let editMode: boolean = false;
     let groupMode: boolean = false;
-    let privacyLoading = false;
 
     let htmlDescription: string;
     $: if (member.description) { 
@@ -105,7 +103,7 @@
             <b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
             <Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
                 <ModalHeader toggle={togglePrivacyModal}>
-                    {#if privacyLoading}<div style="float: left; width: 3rem;"><Spinner color="primary" /></div>{/if} Edit privacy
+                    Edit privacy
                 </ModalHeader>
                     <ModalBody>
                         whoops! this is yet to be added.
@@ -127,6 +125,6 @@
     {:else if editMode}
     editing tba o_o
     {:else if groupMode}
-        <GroupEdit bind:loading bind:member bind:groups bind:groupMode />
+        <GroupEdit on:update bind:member bind:groups bind:groupMode />
     {/if}
     </CardBody>
\ No newline at end of file
diff --git a/src/lib/member/GroupEdit.svelte b/src/lib/member/GroupEdit.svelte
index 28d650e3..686a30fd 100644
--- a/src/lib/member/GroupEdit.svelte
+++ b/src/lib/member/GroupEdit.svelte
@@ -15,7 +15,7 @@
 
     export let member: Member;
     export let groups: Group[] = [];
-    export let loading: boolean = false;
+    let loading: boolean = false;
     export let groupMode: boolean = true;
 
     let groupsWithMember: Group[];
diff --git a/src/lib/member/List.svelte b/src/lib/member/List.svelte
index 86adc489..a02cfac0 100644
--- a/src/lib/member/List.svelte
+++ b/src/lib/member/List.svelte
@@ -14,7 +14,6 @@
     import Body from './Body.svelte';
 
     export let isPublic: boolean;
-    let itemLoading: boolean[] = [];
 
     export let list: Member[] = [];
     export let groups: Group[] = [];
@@ -275,17 +274,16 @@
     {#each slicedList as member, index (member.id)}
             {#if (!isPublic && member.privacy.visibility === "public") || isPublic}
             <AccordionItem>
-                <CardsHeader bind:item={member} loading={itemLoading[index]} slot="header">
                     <FaUserCircle slot="icon" />
                 </CardsHeader>
-                <Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member loading={itemLoading[index]} />
+                <Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
             </AccordionItem>
             {:else}
             <AccordionItem>
-                <CardsHeader bind:item={member} loading={itemLoading[index]} slot="header">
+                <CardsHeader bind:item={member} slot="header">
                     <FaLock slot="icon" />
                 </CardsHeader>
-                <Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member loading={itemLoading[index]} />
+                <Body on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
             </AccordionItem>
             {/if}
     {/each}