Browse Source

show a loading indicator on the claim-confirmation screen

Trent Larson 5 months ago
parent
commit
05cc5b011d
  1. 17
      src/views/ConfirmGiftView.vue

17
src/views/ConfirmGiftView.vue

@ -27,7 +27,7 @@
</h1> </h1>
</div> </div>
<div v-if="giveDetails"> <div v-if="giveDetails && !isLoading">
<div class="flex justify-center"> <div class="flex justify-center">
<button <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" 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> </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 <a
@click="showClaimPage(veriClaim.id)" @click="showClaimPage(veriClaim.id)"
class="text-blue-500 cursor-pointer" class="text-blue-500 cursor-pointer"
@ -382,6 +382,13 @@
All Generic Info All Generic Info
</a> </a>
</div> </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> </section>
</template> </template>
@ -426,6 +433,7 @@ export default class ClaimView extends Vue {
giveDetails = null; giveDetails = null;
giverName = ""; giverName = "";
issuerName = ""; issuerName = "";
isLoading = false;
numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
recipientName = ""; recipientName = "";
showDetails = false; showDetails = false;
@ -452,6 +460,7 @@ export default class ClaimView extends Vue {
} }
async mounted() { async mounted() {
this.isLoading = true;
await db.open(); await db.open();
const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings; const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
this.activeDid = settings?.activeDid || ""; 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 // 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() // then use this truer check: navigator.canShare && navigator.canShare()
this.canShare = !!navigator.share; this.canShare = !!navigator.share;
this.isLoading = false;
} }
// insert a space before any capital letters except the initial letter // insert a space before any capital letters except the initial letter

Loading…
Cancel
Save