add many loading spinners

cashubtc · May 19, 2024 · 71de160 · 71de160
1 parent 1601f57
commit 71de160
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 14 deletions.
diff --git a/src/components/InvoiceDetailDialog.vue b/src/components/InvoiceDetailDialog.vue
@@ -49,7 +49,7 @@
                 ? 'Creating invoice...'
                 : 'Create Invoice'
             "
-            ><q-spinner-tail
+            ><q-spinner-hourglass
               v-if="createInvoiceButtonBlocked"
               color="white"
               size="1em"

diff --git a/src/components/MintSettings.vue b/src/components/MintSettings.vue
@@ -140,14 +140,14 @@
             class="q-px-lg q-mt-xs"
             color="primary"
             :disabled="addMintData.url.length == 0"
-            :loading="addingMint"
+            :loading="addMintBlocking"
             @click="showAddMintDialog = true"
           >
             <q-icon size="xs" name="add" class="q-pr-xs" />
             Add mint
             <template v-slot:loading>
-              <q-spinner-hourglass class="on-left" />
-              Loading...
+              <q-spinner-hourglass />
+              Adding mint...
             </template>
           </q-btn>
         </div>
@@ -386,9 +386,13 @@
               v-close-popup
               color="primary"
               icon="check"
-              :loading="addingMint"
+              :loading="addMintBlocking"
               @click="addMintInternal(addMintData, (verbose = true))"
               >Add mint
+              <template v-slot:loading>
+                <q-spinner-hourglass />
+                Adding mint...
+              </template>
             </q-btn>
           </div>
           <div class="col">
@@ -520,7 +524,12 @@ export default defineComponent({
       "checkSentTokens",
     ]),
     ...mapState(useP2PKStore, ["p2pkKeys"]),
-    ...mapState(useMintsStore, ["activeMintUrl", "mints", "activeProofs"]),
+    ...mapState(useMintsStore, [
+      "activeMintUrl",
+      "mints",
+      "activeProofs",
+      "addMintBlocking",
+    ]),
     ...mapState(useNostrStore, ["pubkey", "mintRecommendations"]),
     ...mapState(useWalletStore, ["mnemonic"]),
     ...mapWritableState(useMintsStore, [

diff --git a/src/components/PayInvoiceDialog.vue b/src/components/PayInvoiceDialog.vue
@@ -54,7 +54,7 @@
             "
             @click="melt"
             :label="!payInvoiceData.blocking ? 'Pay' : 'Processing...'"
-            ><q-spinner-tail
+            ><q-spinner-hourglass
               v-if="payInvoiceData.blocking"
               color="white"
               size="1em"

diff --git a/src/components/ReceiveTokenDialog.vue b/src/components/ReceiveTokenDialog.vue
@@ -44,9 +44,21 @@
           color="primary"
           rounded
           class="q-mr-sm"
-          :disabled="!decodeToken(receiveData.tokensBase64)"
-          :label="knowThisMint ? 'Receive' : 'Add mint'"
-        />
+          :disabled="!decodeToken(receiveData.tokensBase64) || addMintBlocking"
+          :label="
+            knowThisMint
+              ? addMintBlocking
+                ? 'Adding mint ...'
+                : 'Receive'
+              : 'Add mint'
+          "
+        >
+          <!-- <q-spinner-hourglass
+            v-if="addMintBlocking"
+            size="1em"
+            class="q-ml-md"
+        /> -->
+        </q-btn>
         <q-btn
           @click="addPendingTokenToHistory(receiveData.tokensBase64)"
           color="primary"
@@ -113,7 +125,11 @@ export default defineComponent({
       "receiveData",
     ]),
     ...mapState(useUiStore, ["tickerShort"]),
-    ...mapState(useMintsStore, ["activeProofs", "activeUnit"]),
+    ...mapState(useMintsStore, [
+      "activeProofs",
+      "activeUnit",
+      "addMintBlocking",
+    ]),
     ...mapWritableState(useMintsStore, ["addMintData", "showAddMintDialog"]),
     ...mapState(useCameraStore, ["hasCamera"]),
     canPasteFromClipboard: function () {

diff --git a/src/components/TokenInformation.vue b/src/components/TokenInformation.vue
@@ -1,13 +1,18 @@
 <template>
   <div class="row text-left q-py-none q-my-none">
     <div class="col-12 q-px-none">
-      <q-chip v-if="showAmount" outline icon="toll" class="q-mr-md q-pa-md">
+      <q-chip v-if="showAmount" outline class="q-mr-md q-pa-md">
+        <q-icon name="toll" size="xs" class="q-mr-sm" />
         <strong>{{ displayUnit }} </strong>
       </q-chip>
-      <q-chip outline icon="account_balance" class="q-pa-md">
+      <q-chip outline class="q-pa-md">
+        <q-icon name="account_balance" size="xs" class="q-mr-xs" />
         {{ tokenMintUrl }}
+        <q-spinner-hourglass v-if="addMintBlocking" size="sm" class="q-ml-sm" />
         <q-icon
-          v-if="showMintCheck && mintKnownToUs(proofsToShow)"
+          v-if="
+            showMintCheck && mintKnownToUs(proofsToShow) && !addMintBlocking
+          "
           name="check"
           size="sm"
           color="green"
@@ -62,6 +67,7 @@ export default defineComponent({
       "mints",
       "proofs",
       "activeUnit",
+      "addMintBlocking",
     ]),
     proofsToShow: function () {
       return token.getProofs(token.decode(this.encodedToken));

diff --git a/src/stores/mints.ts b/src/stores/mints.ts
@@ -92,6 +92,7 @@ export const useMintsStore = defineStore("mints", {
       blindSignatures: useLocalStorage("cashu.blindSignatures", [] as BlindSignatureAudit[]),
       // balances: useLocalStorage("cashu.balances", {} as Balances),
       showAddMintDialog: false,
+      addMintBlocking: false,
       showRemoveMintDialog: false,
     };
   },
@@ -195,6 +196,7 @@ export const useMintsStore = defineStore("mints", {
     },
     addMint: async function (addMintData: { url: string, nickname: string }, verbose = false) {
       let url = addMintData.url;
+      this.addMintBlocking = true;
       try {
         // sanitize url
         const sanitizeUrl = (url: string): string => {
@@ -232,6 +234,7 @@ export const useMintsStore = defineStore("mints", {
         throw error;
       } finally {
         this.showAddMintDialog = false;
+        this.addMintBlocking = false;
       }
     },
     activateMintUrl: async function (url: string, verbose = false, force = false) {