sign in loading icon

Author: supalarry

frontend/src/views/auth/SignIn.vue

@@ -22,7 +22,10 @@
               <input type="password" placeholder="Password" v-model="formData.password" class="matcha-input">
               <span class="matcha-input-error">{{ errors[0] }}</span>
             </ValidationProvider>
-            <input type="submit" :disabled="invalid" value="Sign In" v-bind:class="{'auth-sub-container-content-submit-button': true, 'opacity-50': invalid, 'cursor-pointer': !invalid}">
+            <input v-if="!submitted" type="submit" :disabled="invalid" value="Sign In" v-bind:class="{'auth-sub-container-content-submit-button': true, 'opacity-50': invalid, 'cursor-pointer': !invalid}">
+            <div v-else class="flex items-center justify-center mt-4">
+              <img class="h-12" src="../../assets/loading.svg">
+            </div>
           </form>
         </ValidationObserver>
       </div>
@@ -52,10 +55,12 @@ export default {
       happened: false,
       message: '',
     },
+    submitted: false,
   }),
   methods: {
     async onSubmit() {
       try {
+        this.submitted = true;
         this.clearError();
         const response = await this.signInUser(this.formData);
         localStorage.setItem(process.env.VUE_APP_ACCESS_TOKEN, response.data.return.access_token);
@@ -68,8 +73,10 @@ export default {
         } else {
           this.$router.push('/onboarding');
         }
+        this.submitted = false;
       } catch (error) {
         this.displayError(this.$errorMessenger(error));
+        this.submitted = false;
       }
     },
     async signInUser(user) {