show a loading indicator on the claim-confirmation screen
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user