Browse Source

show a loading indicator on the claim-confirmation screen

pull/120/head
Trent Larson 3 months ago
parent
commit
05cc5b011d
  1. 17
      src/views/ConfirmGiftView.vue

17
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

Loading…
Cancel
Save