From ffad3eb6e8690e6ad63bd1e383f91c012aa6097b Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Tue, 17 Feb 2026 04:25:23 +0000
Subject: [PATCH] feat: enhance AuthModal loading indicators and button labels

- Replaced static icons with animated SVG loaders for various authentication actions, improving user feedback during loading states.
- Updated button labels to reflect current actions, such as 'Signing in...' and 'Waiting...', enhancing clarity for users.
- Adjusted layout spacing for buttons to ensure consistent visual presentation.

These changes improve the user experience by providing clear visual cues during authentication processes.
---
 src/components/AuthModal.vue | 38 ++++++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/AuthModal.vue b/src/components/AuthModal.vue
index df47927..120deda 100644
--- a/src/components/AuthModal.vue
+++ b/src/components/AuthModal.vue
@@ -128,11 +128,11 @@
                   :disabled="isLoading"
                   class="nostr-login-button w-full flex items-center justify-center gap-2"
                 >
-                  <img
-                    src="@/assets/images/primal-icon.svg"
-                    alt="Primal"
-                    class="w-5 h-5 shrink-0"
-                  />
+                  <svg v-if="nostrConnectLoading" class="w-5 h-5 shrink-0 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                  </svg>
+                  <img v-else src="@/assets/images/primal-icon.svg" alt="Primal" class="w-5 h-5 shrink-0" />
                   {{ nostrConnectLoading ? 'Waiting...' : 'Remote Signer' }}
                 </button>
                 <template v-else>
@@ -162,10 +162,14 @@
               :disabled="isLoading"
               class="nostr-login-button w-full flex items-center justify-center gap-2 mt-3"
             >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg v-if="authLoading" class="w-5 h-5 shrink-0 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+              <svg v-else class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
               </svg>
-              Sign in with Nostr Extension
+              {{ authLoading ? 'Signing in...' : 'Extension' }}
             </button>
 
             <!-- nsec login (hidden by default; tap to reveal field) -->
@@ -174,15 +178,15 @@
                 type="button"
                 @click="showNsecField = true"
                 :disabled="isLoading"
-                class="nostr-login-button w-full flex items-center justify-center gap-2 mt-6"
+                class="nostr-login-button w-full flex items-center justify-center gap-2 mt-3"
               >
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                 </svg>
-                Sign in with nsec (private key)
+                Private Key
               </button>
             </template>
-            <div v-else class="nsec-field-block mt-6">
+            <div v-else class="nsec-field-block mt-3">
               <input
                 v-model="nsecInput"
                 type="password"
@@ -198,7 +202,11 @@
                   class="nostr-login-button flex-1 flex items-center justify-center gap-2"
                   :class="{ 'opacity-40 cursor-not-allowed': !nsecInput.trim() || isLoading }"
                 >
-                  Sign in
+                  <svg v-if="authLoading" class="w-5 h-5 shrink-0 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                  </svg>
+                  {{ authLoading ? 'Signing in...' : 'Sign in' }}
                 </button>
                 <button
                   type="button"
@@ -342,10 +350,14 @@
                 :disabled="isLoading"
                 class="nostr-login-button sovereign-generate-btn w-full flex items-center justify-center gap-3"
               >
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg v-if="sovereignGenerating" class="w-5 h-5 shrink-0 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+                <svg v-else class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                 </svg>
-                {{ isLoading ? 'Generating...' : 'Generate Sovereign Identity' }}
+                {{ sovereignGenerating ? 'Generating...' : 'Generate Sovereign Identity' }}
               </button>
               <button
                 @click="sovereignDismissed = true; sovereignPhase = 'normal'"