sign up loading icon

Author: supalarry

frontend/src/views/auth/SignUp.vue

@@ -35,7 +35,10 @@
               <input type="password" placeholder="Password" v-model="formData.password" class="matcha-input">
               <span class="matcha-input-error">{{ passwordErrorHandler(errors[0]) }}</span>
             </ValidationProvider>
-            <input type="submit" :disabled="invalid" value="Sign Up" 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 Up" 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>
@@ -69,6 +72,7 @@ export default {
       happened: false,
       message: '',
     },
+    submitted: false,
   }),
   methods: {
     passwordErrorHandler(error) {
@@ -79,11 +83,14 @@ export default {
     },
     async onSubmit() {
       try {
+        this.submitted = true;
         this.clearError();
         await this.signUpUser(this.formData);
         this.confirmationEmailSent = true;
+        this.submitted = false;
       } catch (error) {
         this.displayError(this.$errorMessenger(error));
+        this.submitted = false;
       }
     },
     async signUpUser(user) {