Consistent and smooth loading

EphyraSoftware · Feb 25, 2024 · 25678a1 · 25678a1
1 parent 9b61c52
commit 25678a1
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 51 deletions.
diff --git a/ui/src/component/LoadingSpinner.vue b/ui/src/component/LoadingSpinner.vue
@@ -8,11 +8,25 @@ defineProps<{
 </script>
 
 <template>
-    <div class="flex flex-col items-center" v-if="loading">
-        <slot name="loading"></slot>
-        <span class="loading loading-infinity loading-lg"></span>
-    </div>
-    <template v-else>
-        <slot name="content"></slot>
-    </template>
+    <Transition name="fade" mode="out-in">
+        <div class="flex flex-col items-center" v-if="loading">
+            <slot name="loading"></slot>
+            <span class="loading loading-infinity loading-lg"></span>
+        </div>
+        <template v-else>
+            <slot name="content"></slot>
+        </template>
+    </Transition>
 </template>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/ui/src/store/key-collections-store.ts b/ui/src/store/key-collections-store.ts
@@ -10,6 +10,7 @@ export interface KeyCollectionWithKeys {
 }
 
 export const useKeyCollectionsStore = defineStore("key-collections", () => {
+  const loading = ref(true);
   const keyCollections = ref<KeyCollectionWithKeys[]>([]);
 
   const pushKeyCollection = (collection: KeyCollectionWithKeys) => {
@@ -27,15 +28,22 @@ export const useKeyCollectionsStore = defineStore("key-collections", () => {
 
   const client = inject("client") as ComputedRef<AppAgentClient>;
   const loadKeyCollections = async (client: AppAgentClient) => {
-    const collections: KeyCollectionWithKeys[] = await client.callZome({
-      role_name: "trusted",
-      zome_name: "trusted",
-      fn_name: "get_my_key_collections",
-      payload: null,
-      cap_secret: null,
-    });
-
-    keyCollections.value = [...collections, ...keyCollections.value];
+    try {
+      const collections: KeyCollectionWithKeys[] = await client.callZome({
+        role_name: "trusted",
+        zome_name: "trusted",
+        fn_name: "get_my_key_collections",
+        payload: null,
+        cap_secret: null,
+      });
+
+      keyCollections.value = [...collections, ...keyCollections.value];
+    } catch (e) {
+      // TODO Don't have the notifications store here, can I use it?
+      console.error("Error loading key collections", e);
+    } finally {
+      loading.value = false;
+    }
   };
 
   watch(
@@ -51,6 +59,7 @@ export const useKeyCollectionsStore = defineStore("key-collections", () => {
   );
 
   return {
+    loading,
     keyCollections,
     pushKeyCollection,
     addKeyToCollection,

diff --git a/ui/src/store/my-keys-store.ts b/ui/src/store/my-keys-store.ts
@@ -32,9 +32,7 @@ export const useMyKeysStore = defineStore("my-keys", () => {
       // TODO Don't have the notifications store here, can I use it?
       console.error("Error loading keys", e);
     } finally {
-      setTimeout(() => {
-        loading.value = false;
-      }, 250)
+      loading.value = false;
     }
   };
 

diff --git a/ui/src/trusted/trusted/KeyCollections.vue b/ui/src/trusted/trusted/KeyCollections.vue
@@ -1,29 +1,41 @@
 <script setup lang="ts">
 import { useKeyCollectionsStore } from "../../store/key-collections-store";
 import KeyList from "../../component/KeyList.vue";
+import { storeToRefs } from "pinia";
+import LoadingSpinner from "../../component/LoadingSpinner.vue";
 
-const keyCollectionsStore = useKeyCollectionsStore();
+const { loading, keyCollections } = storeToRefs(useKeyCollectionsStore());
 </script>
 
 <template>
   <p class="text-lg">My Key Collections</p>
 
-  <div
-    v-if="keyCollectionsStore.keyCollections.length === 0"
-    class="ms-5 italic"
-  >
-    <p>You don't have any key collections yet.</p>
-    <!-- TODO I want to link to the search screen here but I need the router for that -->
-    <p>When you add a key you will be able to create a collection for it!</p>
-  </div>
-  <template v-else>
-    <div
-      v-for="c in keyCollectionsStore.keyCollections"
-      v-bind:key="c.name"
-      class="mt-3"
-    >
-      <p class="font-bold">{{ c.name }}</p>
-      <KeyList :keys-with-meta="c.gpg_keys" :readonly="true"></KeyList>
-    </div>
-  </template>
+  <LoadingSpinner :loading="loading">
+    <template #loading>
+      <p class="text-lg p-2">Loading key collections</p>
+    </template>
+    <template #content>
+      <div> <!-- Single root for loading transition -->
+        <div
+        v-if="keyCollections.length === 0"
+        class="ms-5 italic"
+      >
+        <p>You don't have any key collections yet.</p>
+        <!-- TODO I want to link to the search screen here but I need the router for that -->
+        <p>When you add a key you will be able to create a collection for it!</p>
+      </div>
+      <template v-else>
+        <div
+          v-for="c in keyCollections"
+          v-bind:key="c.name"
+          class="mt-3"
+        >
+          <p class="font-bold">{{ c.name }}</p>
+          <KeyList :keys-with-meta="c.gpg_keys" :readonly="true"></KeyList>
+        </div>
+      </template>
+      </div>
+    </template>
+  </LoadingSpinner>
+
 </template>
diff --git a/ui/src/trusted/trusted/MyKeys.vue b/ui/src/trusted/trusted/MyKeys.vue
@@ -2,7 +2,7 @@
 import { useMyKeysStore } from "../../store/my-keys-store";
 import KeyList from "../../component/KeyList.vue";
 import DistributeGpgKey from "./DistributeGpgKey.vue";
-import { computed, ref, watch } from "vue";
+import { ref, watch } from "vue";
 import LoadingSpinner from "../../component/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
 
@@ -12,6 +12,7 @@ const showDistribute = ref(false);
 
 // Encourage the user to distribute a key if they don't have any yet
 watch(loading, (loading) => {
+  console.log(`loading: ${loading}, length ${myKeys.value.length}`)
   if (!loading && myKeys.value.length === 0) {
     showDistribute.value = true;
   }
@@ -37,20 +38,22 @@ watch(loading, (loading) => {
         <p class="text-lg p-2">Loading keys</p>
       </template>
       <template #content>
-        <Transition name="fade">
-          <div class="flex justify-center my-3" v-if="showDistribute">
-            <div class="card w-3/4 bg-base-100 shadow-xl">
-              <div class="card-body">
-                <h2 class="card-title">Distribute your GPG public key</h2>
-                <DistributeGpgKey @distributed="showDistribute = false"></DistributeGpgKey>
+        <div> <!-- Single root for loading transition -->
+          <Transition name="fade">
+            <div class="flex justify-center my-3" v-if="showDistribute">
+              <div class="card w-3/4 bg-base-100 shadow-xl">
+                <div class="card-body">
+                  <h2 class="card-title">Distribute your GPG public key</h2>
+                  <DistributeGpgKey @distributed="showDistribute = false"></DistributeGpgKey>
+                </div>
               </div>
             </div>
-          </div>
-        </Transition>
-
-        <template v-if="myKeys.length">
-          <KeyList :keys-with-meta="myKeys" :readonly="true"></KeyList>
-        </template>
+          </Transition>
+
+          <template v-if="myKeys.length">
+            <KeyList :keys-with-meta="myKeys" :readonly="true"></KeyList>
+          </template>
+        </div>
       </template>
     </LoadingSpinner>
   </div>