Constrain signer and card creation spinners

src/App.vue

@@ -3681,7 +3681,10 @@ watch(mobileMenuOpen, (open) => {
             Continue
           </button>
           <button v-else-if="signupStep === 4" class="primary-action" type="button" :disabled="isCreatingMembership" @click="createMembership">
-            {{ isCreatingMembership ? 'Enabling alerts...' : 'Enable alerts & create card' }}
+            <span v-if="isCreatingMembership" class="button-spinner-only" aria-label="Creating card">
+              <img src="/images/small-logo.svg" alt="" />
+            </span>
+            <template v-else>Enable alerts & create card</template>
           </button>
         </div>
       </div>

src/style.css

@@ -1030,6 +1030,37 @@ body.menu-open {
   text-transform: none;
 }
 
+.signin-loading-label {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.55rem;
+  line-height: 1;
+}
+
+.signin-loading-label img {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex: 0 0 auto;
+  object-fit: contain;
+  filter: drop-shadow(0 0 0.45rem rgba(8, 8, 8, 0.35));
+  animation: card-logo-spin 900ms cubic-bezier(0.45, 0, 0.2, 1) infinite;
+}
+
+.button-spinner-only {
+  display: inline-grid;
+  width: 100%;
+  place-items: center;
+}
+
+.button-spinner-only img {
+  width: 1.45rem;
+  height: 1.45rem;
+  object-fit: contain;
+  filter: brightness(0) drop-shadow(0 0 0.35rem rgba(8, 8, 8, 0.32));
+  animation: card-logo-spin 900ms cubic-bezier(0.45, 0, 0.2, 1) infinite;
+}
+
 .modal-close {
   position: relative;
   display: grid;