fix

src/assets/Spinner.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="rotate(0 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(30 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(60 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(90 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(120 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(150 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(180 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(210 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(240 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(270 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(300 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g><g transform="rotate(330 50 50)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="49" y="17" rx="1" ry="1.44" width="2" height="12" fill="#ffffff" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  </rect>
+</g>
+<!-- [ldio] generated by https://loading.io/ --></svg>

src/components/Global/Button/RectangleButton.vue

@@ -10,6 +10,7 @@
     :small="sm"
     :large="lg"
     :x-large="xl"
+    :loading="loading"
   >
     <template v-if="text">
       <template v-if="icon"
@@ -40,6 +41,9 @@ export default {
     iconRight: {},
     textMode: {},
     width: {},
+    loading: {
+      default: false,
+    },
     color: {
       default: "white",
     },

src/components/Global/Misc/Loading.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import Idefault from '@/assets/Misterious_mist.gif'
+import Idefault from '@/assets/Spinner.svg'
 export default {
   props: {
     src: {

src/components/Products/Add.vue

@@ -195,7 +195,7 @@
               <router-link :to="{ name: 'products' }">
                 <RectangleButton
                   text="I’VE CHANGED MY MIND"
-                  icon="WMi-cancel"
+                  icon="WMi-cancel-linear"
                   class="px-0"
                   height="29"
                   lg
@@ -207,6 +207,7 @@
                 height="29"
                 type="submit"
                 lg
+                :loading="addProductRequestLoading"
               />
             </div>
           </div>
@@ -234,6 +235,7 @@ export default {
   },
   data: () => ({
     loading: false,
+    addProductRequestLoading: false,
     random_token: RANDOM_TOKEN,
     form: {
       batch_id: RANDOM_TOKEN,
@@ -278,6 +280,7 @@ export default {
       try {
         let valid = this.$refs.form.validate();
         if (valid) {
+          this.addProductRequestLoading = true;
           let repository = new FileRepository();
           if (this.productId) {
             if (this.fileForm.file) {
@@ -295,6 +298,8 @@ export default {
         }
       } catch (e) {
         return e;
+      } finally {
+        this.addProductRequestLoading = false;
       }
     },
     async load() {

src/components/Profile/Profile.vue

@@ -148,7 +148,7 @@
               <router-link :to="{ name: 'dashboard' }">
                 <RectangleButton
                   text="I’VE CHANGED MY MIND"
-                  icon="WMi-cancel"
+                  icon="WMi-cancel-linear"
                   class="px-0"
                   height="29"
                   lg
@@ -159,6 +159,7 @@
                 height="29"
                 type="submit"
                 lg
+                :loading="profileRequestLoading"
               />
             </div>
           </div>
@@ -188,6 +189,7 @@ export default {
       collection: "main_image",
       crop_data: {},
     },
+    profileRequestLoading: false,
   }),
   computed: {
     ...mapGetters("profile", ["getProfile", "getProfileLoading"]),
@@ -202,12 +204,19 @@ export default {
       this.form["batch_id"] = RANDOM_TOKEN;
     },
     async submit() {
+      try {
+        this.profileRequestLoading = true;
         if (this.fileForm.file) {
           let repository = new FileRepository();
           await repository.store(this.fileForm);
         }
         await this.updateProfile(this.form);
         this.$router.push({ name: "dashboard" });
+      } catch (e) {
+        return e;
+      } finally {
+        this.profileRequestLoading = false;
+      }
     },
   },
   async created() {

src/components/Profile/TraineeProfile.vue

@@ -133,7 +133,7 @@
               <router-link :to="{ name: 'dashboard' }">
                 <RectangleButton
                   text="I’VE CHANGED MY MIND"
-                  icon="WMi-cancel"
+                  icon="WMi-cancel-linear"
                   class="px-0"
                   height="29"
                   lg

src/components/Programs/Add.vue

@@ -108,15 +108,17 @@
               <router-link :to="{ name: 'programs' }">
                 <RectangleButton
                   text="I’VE CHANGED MY MIND"
-                  icon="WMi-cancel"
+                  icon="WMi-cancel-linear"
                   class="px-0"
-                  height="19"
+                  height="29"
+                  lg
                 />
               </router-link>
               <RectangleButton
                 :text="(programId ? 'update' : 'add') + ' the program'"
                 class="custom-btn add-btn"
-                height="25"
+                height="29"
+                lg
                 type="submit"
               />
             </div>

src/components/Users/Modals/ChangeRoleModal.vue

@@ -46,6 +46,7 @@
           class="btn__modal--confirm custom-btn wa__f__m__eb"
           text="change"
           @click.native="changeRole"
+          :loading="changeRoleRequestLoading"
         />
       </div>
     </template>
@@ -67,6 +68,7 @@ export default {
   data: () => ({
     role_id: null,
     currectRoleId: null,
+    changeRoleRequestLoading: false,
   }),
   computed: {
     form() {
@@ -84,6 +86,8 @@ export default {
       this.form.roles_id.push(this.role_id);
     },
     async changeRole() {
+      try {
+        this.changeRoleRequestLoading = true;
         if (this.form.roles_id) {
           if (
             !this.form.roles_id.includes(this.currectRoleId) &&
@@ -99,6 +103,11 @@ export default {
             toast.error("Change the role first", "Error");
           }
         }
+      } catch (e) {
+        return e;
+      } finally {
+        this.changeRoleRequestLoading = false;
+      }
     },
   },
 };

src/components/Workouts/Add.vue

@@ -155,7 +155,7 @@
               <router-link :to="{ name: 'workouts' }">
                 <RectangleButton
                   text="I’VE CHANGED MY MIND"
-                  icon="WMi-cancel"
+                  icon="WMi-cancel-linear"
                   class="px-0"
                   height="29"
                   lg

src/views/ForgotPassword.vue

@@ -35,6 +35,7 @@
                       :text-mode="true"
                       text="send the code"
                       type="submit"
+                      :loading="forgotRequestLoading"
                     />
                   </v-col>
                   <v-col cols="12" class="pt-0">
@@ -74,9 +75,20 @@ export default {
   },
   data: () => ({
     form: {},
+    forgotRequestLoading: false,
   }),
   methods: {
     async forgotPassword() {
+      try {
+        this.forgotRequestLoading = true;
+        let repository = new AuthRepository();
+        await repository.forgotPassword(this.form);
+        this.$router.push({ name: "login" });
+      } catch (e) {
+        return e;
+      } finally {
+        this.forgotRequestLoading = false;
+      }
       let repository = new AuthRepository();
       await repository.forgotPassword(this.form);
       this.$router.push({ name: "login" });

src/views/Login.vue

@@ -47,6 +47,7 @@
                         lg
                         :text-mode="true"
                         text="sign in"
+                        :loading="btnLoading"
                         type="submit"
                       />
                     </div>
@@ -106,14 +107,22 @@ export default {
   data: () => ({
     showPassword: false,
     form: {},
+    btnLoading: false,
   }),
   methods: {
     ...mapActions("auth", ["login"]),
     async doLogin() {
+      try {
+        this.btnLoading = true;
         let response = await this.login(this.form);
         if (response) {
           this.$router.push(this.$route.query.redirect || "/");
         }
+      } catch (e) {
+        return e;
+      } finally {
+        this.btnLoading = false;
+      }
     },
   },
 };

src/views/Register.vue

@@ -79,6 +79,7 @@
                         :text-mode="true"
                         text="do sign up"
                         type="submit"
+                        :loading="signUpRequestLoading"
                       />
                     </div>
                   </v-col>
@@ -136,6 +137,7 @@
                         type="submit"
                         height="29"
                         lg
+                        :loading="verifyCodeRequestLoading"
                       />
                     </v-col>
                     <v-col cols="12" class="pt-0">
@@ -176,21 +178,37 @@ export default {
     showPassword: false,
     form: {},
     verifyCodePage: false,
+    signUpRequestLoading: false,
+    verifyCodeRequestLoading: false,
   }),
   methods: {
     ...mapActions("auth", ["register", "verifyEmail"]),
     async doRegister() {
+      try {
+        this.signUpRequestLoading = true;
         let response = await this.register(this.form);
         if (response) {
           this.toggleVerifyCodePage();
         }
+      } catch (e) {
+        return e;
+      } finally {
+        this.signUpRequestLoading = false;
+      }
     },
     toggleVerifyCodePage() {
       this.verifyCodePage = !this.verifyCodePage;
     },
     async verifyEmailCode() {
+      try {
+        this.verifyCodeRequestLoading = true;
         await this.verifyEmail(this.form);
         this.$router.push({ name: "dashboard" });
+      } catch (e) {
+        return e;
+      } finally {
+        this.verifyCodeRequestLoading = false;
+      }
     },
   },
 };