Amélioration card de connexion avec spinner

Author: AVapps

src/components/UserAddItem.vue

@@ -1,48 +1,79 @@
 <template>
-  <ion-card @click="signIn()" :button="true">
+  <ion-card @click="signIn()" :button="true" :disabled="connect.isLoading">
     <ion-avatar>
       <ion-icon :icon="addCircleOutline" />
     </ion-avatar>
+    <ion-spinner class="loading-spinner" :class="connect.isLoading ? 'show' : ''" name="crescent" />
     <ion-card-header>
-      <ion-card-title class="ion-text-center">Connexion</ion-card-title>
+      <ion-card-title class="ion-text-center">
+        Connexion
+        <ion-spinner v-if="connect.isLoading" />
+      </ion-card-title>
     </ion-card-header>
   </ion-card>
 </template>
 
 <script setup>
-import { useMainStore } from '@/store';
+import { useConnect, useMainStore, useUser } from '@/store'
 import { addCircleOutline } from 'ionicons/icons'
-import { tryAndToastError } from '@/helpers/toast'
 import { useIonRouter } from '@ionic/vue'
 
-const store = useMainStore()
+const mainStore = useMainStore()
+const connect = useConnect()
+const user = useUser()
 const router = useIonRouter()
 
 async function signIn() {
-  await tryAndToastError(() => store.signIn({ silent: false }))
-  router.push('/')
+  await mainStore.signIn({ silent: false })
+  if (user.userId) {
+    router.push('/')
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 ion-card {
-  --avatar-size: 100px;
-  --card-width: 182px;
-  width: var(--card-width);
+  --avatar-size: 120px;
+  --card-width: 200px;
+
   background: transparent;
+  box-shadow: none;
+
+  &::part(native) {
+    display: grid;
+    grid-template: var(--avatar-size) auto / var(--card-width);
+  }
 
-  ion-avatar {
+  ion-avatar, ion-spinner.loading-spinner {
+    grid-area: 1 / 1 / 2 / 2;
     display: block;
     margin: 10px auto 0;
     height: var(--avatar-size);
     width: var(--avatar-size);
   }
 
+  ion-spinner.loading-spinner {
+    background: rgba(255,255,255,0.5);
+    backdrop-filter: blur(3px);
+    opacity: 0;
+    transition: opacity 0.5s ease;
+
+    [data-theme=dark] & {
+      background: rgba(0,0,0,0.5);
+    }
+
+    &.show {
+      opacity: 1;
+    }
+  }
+
   ion-icon {
     display: block;
     font-size: var(--avatar-size);
-    color: var(--ion-color-muted);
   }
-}
 
+  ion-card-header {
+    grid-area: 2 / 1 / 3 / 2;
+  }
+}
 </style>

src/components/UserSelectItem.vue

@@ -1,9 +1,10 @@
 <template>
-  <ion-card @click="setUser()" :button="true">
+  <ion-card @click="setUser()" :button="true" :disabled="connect.isLoading">
     <ion-avatar>
       <img v-if="userPhoto?.data" :src="`data:${userPhoto.content_type};base64,${userPhoto.data}`" />
       <ion-icon v-else :icon="personCircleOutline"/>
     </ion-avatar>
+    <ion-spinner class="loading-spinner" :class="connect.isLoading ? 'show' : ''" name="crescent" />
     <ion-card-header>
       <ion-card-title class="ion-text-center">{{ props.user?._id }}</ion-card-title>
       <ion-card-subtitle class="ion-text-center">
@@ -15,44 +16,70 @@
 
 <script setup>
 import { personCircleOutline } from 'ionicons/icons'
-import { tryAndToastError } from '@/helpers/toast'
-import { useMainStore, useUser } from '@/store'
+import { useConnect, useMainStore, useUser } from '@/store'
 import { useIonRouter } from '@ionic/vue'
 
 // eslint-disable-next-line no-undef
 const props = defineProps(['user'])
-const store = useMainStore()
+const mainStore = useMainStore()
+const connect = useConnect()
 const userStore = useUser()
 const router = useIonRouter()
 
 const userPhoto = computed(() => props?.user?._attachments['photo.jpg'])
 
 async function setUser() {
-  router.push('/')
   userStore.setUser(props.user)
-  await tryAndToastError(() => store.signIn({ silent: true }))
+  await mainStore.signIn({ silent: true })
+  router.push('/')
 }
 
 </script>
 
 <style lang="scss" scoped>
 ion-card {
-  --avatar-size: 100px;
-  --card-width: 182px;
-  width: var(--card-width);
+  --avatar-size: 120px;
+  --card-width: 200px;
+
   background: transparent;
+  box-shadow: none;
 
-  ion-avatar {
+  &::part(native) {
+    display: grid;
+    grid-template: var(--avatar-size) auto / var(--card-width);
+  }
+
+  ion-avatar, ion-spinner.loading-spinner {
+    grid-area: 1 / 1 / 2 / 2;
     display: block;
     margin: 10px auto 0;
+    padding: 10px;
     height: var(--avatar-size);
     width: var(--avatar-size);
   }
 
+  ion-spinner.loading-spinner {
+    background: rgba(255,255,255,0.5);
+    backdrop-filter: blur(3px);
+    opacity: 0;
+    transition: opacity 0.5s ease;
+
+    [data-theme=dark] & {
+      background: rgba(0,0,0,0.5);
+    }
+
+    &.show {
+      opacity: 1;
+    }
+  }
+
   ion-icon {
     display: block;
     font-size: var(--avatar-size);
   }
-}
 
+  ion-card-header {
+    grid-area: 2 / 1 / 3 / 2;
+  }
+}
 </style>