From 05cc5b011d7569dafc547fd936479f8dcaf9146f Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Mon, 1 Jul 2024 17:55:21 -0600
Subject: [PATCH] show a loading indicator on the claim-confirmation screen

---
 src/views/ConfirmGiftView.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/views/ConfirmGiftView.vue b/src/views/ConfirmGiftView.vue
index 72d7f060a..4ef59870e 100644
--- a/src/views/ConfirmGiftView.vue
+++ b/src/views/ConfirmGiftView.vue
@@ -27,7 +27,7 @@
       </h1>
     </div>
 
-    <div v-if="giveDetails">
+    <div v-if="giveDetails && !isLoading">
       <div class="flex justify-center">
         <button
           class="col-span-1 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
@@ -371,9 +371,9 @@
         >
       </div>
     </div>
-    <div v-else>This does not have details to confirm.</div>
+    <div v-else-if="!isLoading">This does not have details to confirm.</div>
 
-    <div class="mt-4">
+    <div class="mt-4" v-if="!isLoading">
       <a
         @click="showClaimPage(veriClaim.id)"
         class="text-blue-500 cursor-pointer"
@@ -382,6 +382,13 @@
         All Generic Info
       </a>
     </div>
+
+    <div
+      class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
+      v-if="isLoading"
+    >
+      <fa icon="spinner" class="fa-spin-pulse"></fa>
+    </div>
   </section>
 </template>
 
@@ -426,6 +433,7 @@ export default class ClaimView extends Vue {
   giveDetails = null;
   giverName = "";
   issuerName = "";
+  isLoading = false;
   numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
   recipientName = "";
   showDetails = false;
@@ -452,6 +460,7 @@ export default class ClaimView extends Vue {
   }
 
   async mounted() {
+    this.isLoading = true;
     await db.open();
     const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
     this.activeDid = settings?.activeDid || "";
@@ -488,6 +497,8 @@ export default class ClaimView extends Vue {
     // When Chrome compatibility is fixed https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API#api.navigator.canshare
     // then use this truer check: navigator.canShare && navigator.canShare()
     this.canShare = !!navigator.share;
+
+    this.isLoading = false;
   }
 
   // insert a space before any capital letters except the initial letter