diff --git a/src/assets/Misterious_mist.gif b/src/assets/Misterious_mist.gif
new file mode 100644
index 0000000..f82c9d8
Binary files /dev/null and b/src/assets/Misterious_mist.gif differ
diff --git a/src/components/Global/Input/DataIterator.vue b/src/components/Global/Input/DataIterator.vue
new file mode 100644
index 0000000..811db87
--- /dev/null
+++ b/src/components/Global/Input/DataIterator.vue
@@ -0,0 +1,87 @@
+<template>
+  <div :class="{'isLoading':loading}">
+    <template v-if="loading">
+      <slot name="loading">
+        <we-loading />
+      </slot>
+    </template>
+    <template v-if="!loading">
+      <slot></slot>
+    </template>
+    <template v-if="!loading && items.length">
+      <slot
+        name="items"
+        :item="item"
+        v-for="(item, i) in items"
+        :index="i"
+        :itemNumber="pagination ? pagination.pageStart + i : i + 1"
+      />
+    </template>
+    <template v-if="!items.length">
+      <slot name="items-container"> </slot>
+    </template>
+    <template v-if="!loading && !isFiltered && !items.length">
+      <slot name="no-items">
+        <no-items
+          src="/images/Global/Animated/Product.gif"
+          title=""
+          themeColor="product"
+          :hasBtn="false"
+        />
+      </slot>
+    </template>
+    <template v-if="!loading && isFiltered && !items.length">
+      <slot name="no-results">
+        <no-items
+          src="/images/Global/Animated/NoResult.gif"
+          textFa=" no items found! "
+          textEn=" Sorry, No Items Found! "
+          themeColor="product"
+          :hasBtn="false"
+        />
+      </slot>
+    </template>
+    <pagination
+      v-if="items.length && !loading && pagination"
+      :pagination="pagination"
+      @pagination="$emit('pagination', $event)"
+    ></pagination>
+  </div>
+</template>
+
+<script>
+import Pagination from "@/components/Global/Pagination/Pagination.vue";
+export default {
+  name: "data-iterator",
+  components: {
+    Pagination,
+  },
+  props: {
+    pagination: {
+      type: Object,
+      default: null,
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    isFiltered: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.isLoading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height : 100vh;
+}
+</style>
diff --git a/src/components/Global/Input/ImageCropper.vue b/src/components/Global/Input/ImageCropper.vue
index cb459c5..325d5fc 100644
--- a/src/components/Global/Input/ImageCropper.vue
+++ b/src/components/Global/Input/ImageCropper.vue
@@ -87,10 +87,10 @@ export default {
     },
     thumbnail: {
       get() {
-        if(this.url) {
+        if (this.url) {
           return this.url;
         } else {
-          return DefaultImage
+          return DefaultImage;
         }
       },
       set(value) {
@@ -127,6 +127,7 @@ export default {
   border: 1px solid #afafaf;
   border-radius: 5px;
   background-color: white !important;
+  height: 300px;
 }
 .upload-example-cropper.red {
   border: 1px solid red;
diff --git a/src/components/Global/Misc/Loading.vue b/src/components/Global/Misc/Loading.vue
new file mode 100644
index 0000000..055f567
--- /dev/null
+++ b/src/components/Global/Misc/Loading.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="loading-container">
+    <div class="loading">
+      <img :src="src" alt="loading" />
+    </div>
+    <div class="loading__title">{{ title }}</div>
+    <div class="loading__message">{{ message }}</div>
+  </div>
+</template>
+
+<script>
+import Idefault from '@/assets/Misterious_mist.gif'
+export default {
+  props: {
+    src: {
+      default: Idefault,
+    },
+    title: {
+      default: " LOADING... ",
+    },
+    message: {
+      default: " thank you for your patience ",
+    },
+  },
+};
+</script>
+
+<style scoped>
+.loading-container {
+  text-align: center;
+}
+.loading__title,
+.loading__message {
+  font-family: "Barlow-EL", sans-serif;
+}
+.loading__title {
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  font-size: 30px;
+  font-weight: 700;
+}
+.loading__message {
+  font-size: 15px;
+}
+</style>
diff --git a/src/components/Global/Misc/NoItems.vue b/src/components/Global/Misc/NoItems.vue
new file mode 100644
index 0000000..bae2246
--- /dev/null
+++ b/src/components/Global/Misc/NoItems.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="we-no-result">
+    <!-- <img class="Thumbnail" :src="$_getPath(src, true)" />
+    <div class="Fa">{{ textFa }}</div>
+    <div class="En">{{ textEn }}</div>
+    <router-link v-if="hasBtn" :to="{ name: routeName }" class="flex lg6 xs12">
+      <v-btn
+        class="ma-2"
+        outlined
+        @click.native="emitClickEvent"
+        :color="$_color(themeColor)"
+      >
+        <v-icon left>WMi-{{ btnIcon }}</v-icon> {{ btnText }}
+      </v-btn>
+    </router-link> -->
+    <div class="text-center">There are no items to display</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    src: { default: "/images/Global/Animated/no-result-purple.gif" },
+    textFa: { default: " آیتمی برای نمایش وجود ندارد " },
+    textEn: { default: " NO ITEMS AVAILABLE " },
+    themeColor: { default: "black" },
+    btnText: { default: "ثبت اولین آیتم" },
+    btnIcon: { default: "cancel" },
+    modal: { default: null },
+    routeName: { default: null },
+    hasBtn: { default: true },
+  },
+  methods: {
+    emitClickEvent(e) {
+      this.modal ? this.$_openModal(this.modal) : null;
+      this.$emit("button-clicked", e);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.we-no-result {
+  text-align: center;
+  padding: 10px;
+  width: 100%;
+}
+.we-no-result img {
+  width: 300px;
+  height: 300px;
+  border-radius: 150px;
+}
+.we-no-result .Fa {
+  font-size: 18px;
+}
+
+.we-no-result .En {
+  direction: ltr;
+  font-size: 12px;
+  letter-spacing: 5px;
+  text-transform: uppercase;
+}
+</style>
diff --git a/src/components/Profile/Profile.vue b/src/components/Profile/Profile.vue
index a4fc413..98855af 100644
--- a/src/components/Profile/Profile.vue
+++ b/src/components/Profile/Profile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="h-100">
     <main-back height="100%">
-      <div class="py-12 px-10">
+      <div class="py-12 px-10 loading__container">
         <div>
           <SectionTitle
             backText="home page"
@@ -11,7 +11,8 @@
             subTitle="let us know you better, it comes handy."
           />
         </div>
-        <v-form @submit.prevent="submit">
+        <loading v-if="getProfileLoading" class="loading-data" />
+        <v-form @submit.prevent="submit" :class="{ 'loading-form': getProfileLoading }">
           <v-row class="mt-4">
             <v-col cols="3">
               <div class="pb-14 h-100">
@@ -150,12 +151,14 @@
                   icon="WMi-cancel"
                   class="px-0"
                   height="19"
+                  lg
               /></router-link>
               <RectangleButton
                 text="SAVE THE INFO"
                 class="custom-btn save-btn"
-                height="25"
+                height="29"
                 type="submit"
+                lg
               />
             </div>
           </div>
@@ -187,7 +190,7 @@ export default {
     },
   }),
   computed: {
-    ...mapGetters("profile", ["getProfile"]),
+    ...mapGetters("profile", ["getProfile", "getProfileLoading"]),
     ...mapGetters("countries", ["getCountries"]),
   },
   methods: {
@@ -218,4 +221,20 @@ export default {
   padding-right: 100px !important;
   padding-left: 100px !important;
 }
+
+.loading__container {
+  position: relative;
+}
+
+.loading-data {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 9999;
+  transform: translate(-50%, -50%);
+}
+
+.loading-form {
+  filter: blur(5px);
+}
 </style>
diff --git a/src/components/ProgramSeries/Items.vue b/src/components/ProgramSeries/Items.vue
index 432c3c4..36e208c 100644
--- a/src/components/ProgramSeries/Items.vue
+++ b/src/components/ProgramSeries/Items.vue
@@ -23,24 +23,31 @@
             />
           </div>
         </div>
-        <v-row v-for="(series, i) in getProgramSeries" :key="i" class="mt-4">
-          <v-col cols="12"
-            ><SeriesItem
-              :seriesNumber="i + 1"
-              :series="series"
-              :programId="programId"
-          /></v-col>
-        </v-row>
+        <data-iterator
+          :is-filtered="isFilteredProgramSeries"
+          :loading="getProgramSeriesLoading"
+          :items="getProgramSeries"
+          class="row pb-10 mt-5"
+        >
+          <template #loading>
+            <loading />
+          </template>
+          <template #no-items>
+            <no-items />
+          </template>
+          <template #items="{ item, itemNumber }">
+            <v-col cols="12">
+              <SeriesItem :seriesNumber="itemNumber" :series="item" :programId="programId" />
+            </v-col>
+          </template>
+        </data-iterator>
       </div>
     </main-back>
     <div class="text-center">
-      <AddSeriesModal
-        :programId="programId"
-        v-if="isModal('modal_add_series')"
-      />
+      <AddSeriesModal :programId="programId" v-if="isModal('modal_add_series')" />
     </div>
   </div>
-</template> 
+</template>
 <script>
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import SeriesItem from "./Item.vue";
@@ -54,7 +61,11 @@ export default {
     AddSeriesModal,
   },
   computed: {
-    ...mapGetters("programSeries", ["getProgramSeries"]),
+    ...mapGetters("programSeries", [
+      "getProgramSeries",
+      "isFilteredProgramSeries",
+      "getProgramSeriesLoading",
+    ]),
     ...mapGetters("modal", ["isModal"]),
 
     programId() {
@@ -84,4 +95,4 @@ export default {
     margin-left: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Programs/Items.vue b/src/components/Programs/Items.vue
index 90744cc..8ea7208 100644
--- a/src/components/Programs/Items.vue
+++ b/src/components/Programs/Items.vue
@@ -22,10 +22,7 @@
               :text="getFilterCount ? getFilterCount : '0'"
               @click.native="$_openModal('filters')"
             />
-            <router-link
-              :to="{ name: 'addProgram' }"
-              class="text-decoration-none"
-            >
+            <router-link :to="{ name: 'addProgram' }" class="text-decoration-none">
               <RectangleButton
                 icon="WMi-plus"
                 size="xx-large"
@@ -36,22 +33,26 @@
             </router-link>
           </div>
         </div>
-        <v-row class="mt-4">
-          <v-col
-            cols="12"
-            sm="4"
-            v-for="program in getPrograms"
-            :key="program.id"
-            class="mb-3"
-            ><ProgramItem :program="program"
-          /></v-col>
-        </v-row>
-      </div>
-      <div class="text-center mt-40 mb-5">
-        <pagination
-          :pagination="getPaginationProgram"
+        <data-iterator
+          :is-filtered="isFilteredPrograms"
+          :loading="getProgramsLoading"
+          :items="getPrograms"
           @pagination="changePagination"
-        />
+          :pagination="getPaginationProgram"
+          class="row pb-10 mt-5"
+        >
+          <template #loading>
+            <loading />
+          </template>
+          <template #no-items>
+            <no-items />
+          </template>
+          <template #items="{ item }">
+            <v-col cols="12" sm="4" class="mb-3">
+              <ProgramItem :program="item" />
+            </v-col>
+          </template>
+        </data-iterator>
       </div>
     </main-back>
     <div class="text-center">
@@ -79,6 +80,8 @@ export default {
       "getPrograms",
       "getPaginationProgram",
       "getFilterCount",
+      "isFilteredPrograms",
+      "getProgramsLoading",
     ]),
     ...mapGetters("modal", ["isModal"]),
   },
@@ -92,9 +95,7 @@ export default {
       }
     },
     async load() {
-      this.role === "admin"
-        ? await this.loadPrograms()
-        : await this.loadMyPrograms();
+      this.role === "admin" ? await this.loadPrograms() : await this.loadMyPrograms();
     },
   },
   created() {
diff --git a/src/components/Users/Items.vue b/src/components/Users/Items.vue
index 8364d31..b6a0967 100644
--- a/src/components/Users/Items.vue
+++ b/src/components/Users/Items.vue
@@ -8,7 +8,7 @@
               backText="home page"
               link="dashboard"
               icon="WMi-left-open"
-              :title="role==='admin' ? 'users' : 'my trainees'"
+              :title="role === 'admin' ? 'users' : 'my trainees'"
               subTitle="let us know you better, it comes handy."
             />
           </div>
@@ -24,17 +24,30 @@
             />
           </div>
         </div>
-
-        <v-row v-for="(user, i) in getUsers" :key="i" class="mt-4">
-          <v-col cols="12"><UserItem :user="user" @userId="userId" /></v-col>
-        </v-row>
-      </div>
-      <div class="text-center mt-40 mb-5">
-        <pagination
-          :pagination="getPaginationUser"
+        <data-iterator
+          :is-filtered="isFilteredUser"
+          :loading="getUsersLoading"
+          :items="getUsers"
           @pagination="changePagination"
-        />
+          :pagination="getPaginationUser"
+          class="row pb-10 mt-5"
+        >
+          <template #loading>
+            <loading />
+          </template>
+          <template #no-items>
+            <no-items />
+          </template>
+          <template #items="{ item }">
+            <v-col cols="12" class="pb-0">
+              <UserItem :user="item" @userId="userId" />
+            </v-col>
+          </template>
+        </data-iterator>
       </div>
+      <!-- <div class="text-center mt-40 mb-5">
+        <pagination :pagination="getPaginationUser" @pagination="changePagination" />
+      </div> -->
     </main-back>
     <div class="text-center">
       <ChangeRoleModal
@@ -74,6 +87,8 @@ export default {
       "getPaginationUser",
       "getRoles",
       "getFilterCount",
+      "isFilteredUser",
+      "getUsersLoading",
     ]),
     ...mapGetters("modal", ["isModal"]),
 
@@ -89,9 +104,7 @@ export default {
       }
     },
     async load() {
-      this.role === "admin"
-        ? await this.loadUsers()
-        : await this.loadTrainerTrainee();
+      this.role === "admin" ? await this.loadUsers() : await this.loadTrainerTrainee();
     },
     userId(id) {
       this.id = id;
diff --git a/src/components/WorkoutsSeries/Items.vue b/src/components/WorkoutsSeries/Items.vue
index 87b1831..cd7913c 100644
--- a/src/components/WorkoutsSeries/Items.vue
+++ b/src/components/WorkoutsSeries/Items.vue
@@ -24,16 +24,23 @@
             />
           </div>
         </div>
-        <v-row class="mt-4">
-          <v-col
-            cols="12"
-            sm="6"
-            class="mb-3"
-            v-for="(seriesWorkout, i) in getWorkouts"
-            :key="i"
-            ><WorkoutsSeriesItem :seriesWorkout="seriesWorkout" :seriesId="seriesId"
-          /></v-col>
-        </v-row>
+        <data-iterator
+          :loading="getProgramSeriesWorkoutsLoading"
+          :items="getWorkouts"
+          class="row pb-10 mt-5"
+        >
+          <template #loading>
+            <loading />
+          </template>
+          <template #no-items>
+            <no-items />
+          </template>
+          <template #items="{ item }">
+            <v-col cols="12" sm="6" class="mb-3">
+              <WorkoutsSeriesItem :seriesWorkout="item" :seriesId="seriesId" />
+            </v-col>
+          </template>
+        </data-iterator>
       </div>
     </main-back>
     <div class="text-center">
@@ -54,7 +61,7 @@ export default {
     AddWorkoutModal,
   },
   computed: {
-    ...mapGetters("workoutToSeries", ["getWorkouts"]),
+    ...mapGetters("workoutToSeries", ["getWorkouts", "getProgramSeriesWorkoutsLoading"]),
     ...mapGetters("modal", ["isModal"]),
     seriesId() {
       return this.$route.params.seriesId;
diff --git a/src/store/modules/profile/actions.js b/src/store/modules/profile/actions.js
index 23b03e7..1d08748 100644
--- a/src/store/modules/profile/actions.js
+++ b/src/store/modules/profile/actions.js
@@ -1,9 +1,17 @@
 import ProfileRepository from "@/abstraction/repository/profileRepository"
 export default {
     async loadProfile({ commit },) {
-        let repository = new ProfileRepository();
-        let resource = await repository.show();
-        commit('SET_PROFILE', resource)
+        try {
+            commit("SET_LOADING_PROFILE", true);
+            let repository = new ProfileRepository();
+            let resource = await repository.show();
+            commit('SET_PROFILE', resource)
+        } catch (e) {
+            return e;
+        } finally {
+            commit("SET_LOADING_PROFILE", false);
+        }
+
     },
     async updateProfile({ commit }, data) {
         let repository = new ProfileRepository();
diff --git a/src/store/modules/profile/getters.js b/src/store/modules/profile/getters.js
index a116476..1cc71cb 100644
--- a/src/store/modules/profile/getters.js
+++ b/src/store/modules/profile/getters.js
@@ -1,3 +1,4 @@
 export default {
-    getProfile: state => state.profile
+    getProfile: state => state.profile,
+    getProfileLoading: state => state.loading,
 }
\ No newline at end of file
diff --git a/src/store/modules/profile/mutations.js b/src/store/modules/profile/mutations.js
index d318838..fd1b30f 100644
--- a/src/store/modules/profile/mutations.js
+++ b/src/store/modules/profile/mutations.js
@@ -1,9 +1,15 @@
 import Vue from 'vue';
 export default {
+    // SET
     SET_PROFILE(state, payload) {
         Vue.set(state, 'profile', payload)
     },
+    // UPDATE
     UPDATE_PROFILE(state, payload) {
         Vue.set(state, 'profile', payload)
+    },
+    // LOADING
+    SET_LOADING_PROFILE(state, status) {
+        Vue.set(state, 'loading', status);
     }
 }
\ No newline at end of file
diff --git a/src/store/modules/profile/state.js b/src/store/modules/profile/state.js
index 8bb0ede..341ae95 100644
--- a/src/store/modules/profile/state.js
+++ b/src/store/modules/profile/state.js
@@ -1,3 +1,4 @@
 export default {
-    profile: {}
+    profile: {},
+    loading: false,
 }
\ No newline at end of file
diff --git a/src/store/modules/programSeries/actions.js b/src/store/modules/programSeries/actions.js
index d61f1e3..7651831 100644
--- a/src/store/modules/programSeries/actions.js
+++ b/src/store/modules/programSeries/actions.js
@@ -1,9 +1,17 @@
 import ProgramSeriesRepository from "@/abstraction/repository/programSeriesRepository";
 export default {
     async loadProgramSeries({ commit }, courseId) {
-        let repository = new ProgramSeriesRepository();
-        const resource = await repository.index(courseId);
-        commit("SET_PROGRAM_SERIES", resource.data);
+        try {
+            commit("SET_LOADING_PROGRAM_SERIES", true);
+            let repository = new ProgramSeriesRepository();
+            const resource = await repository.index(courseId);
+            commit("SET_PROGRAM_SERIES", resource.data);
+        } catch (e) {
+            return e;
+        } finally {
+            commit("SET_LOADING_PROGRAM_SERIES", false);
+        }
+
     },
     // async loadProgramSeries({ commit }, courseId) {
     //     let repository = new ProgramSeriesRepository();
diff --git a/src/store/modules/programSeries/getters.js b/src/store/modules/programSeries/getters.js
index ca83ea5..912e77b 100644
--- a/src/store/modules/programSeries/getters.js
+++ b/src/store/modules/programSeries/getters.js
@@ -1,4 +1,6 @@
 export default {
     getProgramSeries: state => state.programSeries,
-    getCurrentSeriesId: state => state.currentSeriesId
+    getCurrentSeriesId: state => state.currentSeriesId,
+    isFilteredProgramSeries: state => state.isFiltered,
+    getProgramSeriesLoading: state => state.loading,
 };
diff --git a/src/store/modules/programSeries/mutations.js b/src/store/modules/programSeries/mutations.js
index 80ff10d..45c2ab5 100644
--- a/src/store/modules/programSeries/mutations.js
+++ b/src/store/modules/programSeries/mutations.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 export default {
+    // SET
     SET_PROGRAM_SERIES(state, payload) {
         Vue.set(state, "programSeries", payload);
     },
@@ -9,12 +10,14 @@ export default {
     SET_CURRENT_SERIES_ID(state, payload) {
         Vue.set(state, "currentSeriesId", payload);
     },
+    // ADD
     ADD_SERIES_TO_PROGRAM(state, payload) {
         state.programSeries.push(payload);
     },
     // ADD_SERIES_TO_PROGRAM(state, payload) {
     //     state.programSeries.series.push(payload);
     // },
+    // DELETE
     DELETE_SERIES_FROM_PROGRAM(state, payload) {
         const index = state.programSeries.findIndex((x) => x.id === payload);
         Vue.delete(state.programSeries, index)
@@ -23,4 +26,8 @@ export default {
     //     const index = state.programSeries.series.findIndex((x) => x.id === payload);
     //     Vue.delete(state.programSeries.series, index)
     // }
+    // LOADING
+    SET_LOADING_PROGRAM_SERIES(state, status) {
+        Vue.set(state, 'loading', status);
+    }
 };
diff --git a/src/store/modules/programSeries/state.js b/src/store/modules/programSeries/state.js
index 0862a48..273cbaa 100644
--- a/src/store/modules/programSeries/state.js
+++ b/src/store/modules/programSeries/state.js
@@ -1,5 +1,7 @@
 export default {
     programSeries: [],
     // programSeries: {},
-    currentSeriesId: null, 
+    currentSeriesId: null,
+    isFiltered: false,
+    loading: false,
 };
diff --git a/src/store/modules/programs/actions.js b/src/store/modules/programs/actions.js
index 30c1d95..fa632d8 100644
--- a/src/store/modules/programs/actions.js
+++ b/src/store/modules/programs/actions.js
@@ -5,6 +5,7 @@ let role = UserStorage.getRole() ? UserStorage.getRole() : null;
 export default {
     async loadPrograms({ state, commit }) {
         try {
+            commit("SET_LOADING_PROGRAMS", true);
             let data = { pagination: state.pagination, filters: state.filters };
             let repository = new ProgramRepository();
             const resource = await repository.index(data);
@@ -12,9 +13,10 @@ export default {
             commit("SET_FILTER_COUNT", Object.keys(filterCount).length);
             commit("SET_PROGRAMS", resource.data);
             commit("SET_PAGINATION", resource.pagination);
-        }
-        catch (e) {
+        } catch (e) {
             return e;
+        } finally {
+            commit("SET_LOADING_PROGRAMS", false);
         }
     },
     async loadMyPrograms({ state, commit }) {
diff --git a/src/store/modules/programs/getters.js b/src/store/modules/programs/getters.js
index de9c630..480695b 100644
--- a/src/store/modules/programs/getters.js
+++ b/src/store/modules/programs/getters.js
@@ -3,5 +3,7 @@ export default {
     getProgram: state => state.program,
     getPaginationProgram: state => state.pagination,
     getFilters: state => state.filters,
-    getFilterCount: state => state.filterCount
+    getFilterCount: state => state.filterCount,
+    isFilteredPrograms: state => state.isFiltered,
+    getProgramsLoading: state => state.loading,
 };
diff --git a/src/store/modules/programs/mutations.js b/src/store/modules/programs/mutations.js
index 41d6556..4607b69 100644
--- a/src/store/modules/programs/mutations.js
+++ b/src/store/modules/programs/mutations.js
@@ -34,6 +34,10 @@ export default {
         Vue.set(state.pagination, 'itemsLength', state.pagination.itemsLength - 1);
         Vue.set(state.pagination, 'pageStop', state.pagination.pageStop - 1);
     },
+    // LOADING
+    SET_LOADING_PROGRAMS(state, status) {
+        Vue.set(state, 'loading', status);
+    },
     // OTHER    
     VERIFY_PROGRAM(state, payload) {
         const index = state.programs.find(x => x.id === payload);
diff --git a/src/store/modules/programs/state.js b/src/store/modules/programs/state.js
index 04b9b44..1e09cf7 100644
--- a/src/store/modules/programs/state.js
+++ b/src/store/modules/programs/state.js
@@ -5,5 +5,7 @@ export default {
         itemsPerPage: 12
     },
     filters: {},
-    filterCount: null
+    filterCount: null,
+    isFiltered: false,
+    loading: false,
 };
diff --git a/src/store/modules/users/actions.js b/src/store/modules/users/actions.js
index f6ad622..d5b59e4 100644
--- a/src/store/modules/users/actions.js
+++ b/src/store/modules/users/actions.js
@@ -3,13 +3,20 @@ import RoleRepository from "@/abstraction/repository/roleRepository";
 import { setQuery } from "@/abstraction/resources/userResource";
 export default {
     async loadUsers({ state, commit }) {
-        let data = { pagination: state.pagination, filters: state.filters }
-        let repository = new UserRepository();
-        const resource = await repository.indexUsers(data);
-        let filterCount = setQuery({ filters: state.filters })
-        commit("SET_FILTER_COUNT", Object.keys(filterCount).length);
-        commit("SET_USERS", resource.data);
-        commit("SET_PAGINATION", resource.pagination);
+        try {
+            commit("SET_LOADING_USERS", true);
+            let data = { pagination: state.pagination, filters: state.filters }
+            let repository = new UserRepository();
+            const resource = await repository.indexUsers(data);
+            let filterCount = setQuery({ filters: state.filters })
+            commit("SET_FILTER_COUNT", Object.keys(filterCount).length);
+            commit("SET_USERS", resource.data);
+            commit("SET_PAGINATION", resource.pagination);
+        } catch (e) {
+            return e;
+        } finally {
+            commit("SET_LOADING_USERS", false);
+        }
     },
     async loadTrainerTrainee({ state, commit }) {
         let data = { pagination: state.pagination }
diff --git a/src/store/modules/users/getters.js b/src/store/modules/users/getters.js
index 50431d5..be633c3 100644
--- a/src/store/modules/users/getters.js
+++ b/src/store/modules/users/getters.js
@@ -3,5 +3,7 @@ export default {
     getRoles: state => state.roles,
     getPaginationUser: state => state.pagination,
     getFilters: state => state.filters,
-    getFilterCount: state => state.filterCount
+    getFilterCount: state => state.filterCount,
+    isFilteredUser: state => state.isFiltered,
+    getUsersLoading: state => state.loading,
 };
diff --git a/src/store/modules/users/mutations.js b/src/store/modules/users/mutations.js
index c05e7c4..3ffd0b9 100644
--- a/src/store/modules/users/mutations.js
+++ b/src/store/modules/users/mutations.js
@@ -30,4 +30,8 @@ export default {
         Vue.set(state.pagination, 'itemsLength', state.pagination.itemsLength - 1);
         Vue.set(state.pagination, 'pageStop', state.pagination.pageStop - 1);
     },
+    // LOADING
+    SET_LOADING_USERS(state, status) {
+        Vue.set(state, 'loading', status);
+    }
 };
diff --git a/src/store/modules/users/state.js b/src/store/modules/users/state.js
index 99c3eae..36dc335 100644
--- a/src/store/modules/users/state.js
+++ b/src/store/modules/users/state.js
@@ -5,5 +5,7 @@ export default {
         itemsPerPage: 12
     },
     filters: {},
-    filterCount: null
+    filterCount: null,
+    isFiltered: false,
+    loading: false,
 };
diff --git a/src/store/modules/workoutToSeries/actions.js b/src/store/modules/workoutToSeries/actions.js
index fe27746..82430c0 100644
--- a/src/store/modules/workoutToSeries/actions.js
+++ b/src/store/modules/workoutToSeries/actions.js
@@ -1,9 +1,17 @@
-import WorkoutToSeriesRepository from "../../../abstraction/repository/workoutToSeriesRepository";
+import WorkoutToSeriesRepository from "@/abstraction/repository/workoutToSeriesRepository";
 let repository = new WorkoutToSeriesRepository();
 export default {
     async loadProgramSeriesWorkouts({ commit }, data) {
-        const resource = await repository.index(data);
-        commit("SET_PROGRAM_SERIES_WORKOUTS", resource.data);
+        try {
+            commit("SET_LOADING_PROGRAM_SERIES_WORKOUTS", true);
+            const resource = await repository.index(data);
+            commit("SET_PROGRAM_SERIES_WORKOUTS", resource.data);
+        } catch (e) {
+            return e;
+        } finally {
+            commit("SET_LOADING_PROGRAM_SERIES_WORKOUTS", false);
+        }
+
     },
     async loadWorkoutsToSeries({ state, commit }) {
         try {
diff --git a/src/store/modules/workoutToSeries/getters.js b/src/store/modules/workoutToSeries/getters.js
index 1df4662..e33c5a4 100644
--- a/src/store/modules/workoutToSeries/getters.js
+++ b/src/store/modules/workoutToSeries/getters.js
@@ -1,5 +1,6 @@
 export default {
     getWorkoutsToSeries: state => state.workoutsToSeries,
     getWorkoutToSeries: state => state.workoutToSeries,
-    getWorkouts: state => state.workouts
+    getWorkouts: state => state.workouts,
+    getProgramSeriesWorkoutsLoading: state => state.loading,
 }
\ No newline at end of file
diff --git a/src/store/modules/workoutToSeries/mutations.js b/src/store/modules/workoutToSeries/mutations.js
index 7d0d544..2429f54 100644
--- a/src/store/modules/workoutToSeries/mutations.js
+++ b/src/store/modules/workoutToSeries/mutations.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 export default {
+    // SET
     SET_PROGRAM_SERIES_WORKOUTS(state, payload) {
         Vue.set(state, "workouts", payload)
     },
@@ -12,8 +13,13 @@ export default {
     SET_FILTER_WORKOUTS_TO_SERIES(state, payload) {
         Vue.set(state, "filters", payload);
     },
+    // DELETE
     DELETE_WORKOUT_FROM_SERIES(state, workoutId) {
         const index = state.workouts.findIndex((x) => x.id === workoutId);
         Vue.delete(state.workouts, index)
     },
+    // LOADING
+    SET_LOADING_PROGRAM_SERIES_WORKOUTS(state, status) {
+        Vue.set(state, 'loading', status);
+    }
 };
diff --git a/src/store/modules/workoutToSeries/state.js b/src/store/modules/workoutToSeries/state.js
index 64151f9..057962e 100644
--- a/src/store/modules/workoutToSeries/state.js
+++ b/src/store/modules/workoutToSeries/state.js
@@ -2,5 +2,6 @@ export default {
     workouts: [],
     workoutsToSeries: [],
     workoutToSeries: {},
-    filters: {}
+    filters: {},
+    loading: false,
 };
diff --git a/src/utils/GlobalComponents.js b/src/utils/GlobalComponents.js
index 1c808b4..6dd4afc 100644
--- a/src/utils/GlobalComponents.js
+++ b/src/utils/GlobalComponents.js
@@ -13,7 +13,10 @@ import Pagination from "../components/Global/Pagination/Pagination.vue";
 import Chip from "../components/Global/Chip/Chip.vue";
 import VeeTextField from "@/components/Global/VeeValidate/TextField";
 import VeeForm from "@/components/Global/VeeValidate/Form";
-import SideBar from '../components/Global/Section/SideBar'
+import SideBar from '../components/Global/Section/SideBar';
+import Loading from "../components/Global/Misc/Loading";
+import NoItems from "../components/Global/Misc/NoItems";
+import DataIterator from "../components/Global/Input/DataIterator.vue";
 import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
@@ -31,5 +34,8 @@ Vue.component('basic-modal', BasicModal);
 Vue.component('pagination', Pagination);
 Vue.component('Chip', Chip);
 Vue.component('SideBar', SideBar);
+Vue.component('data-iterator', DataIterator);
+Vue.component('loading', Loading);
+Vue.component('no-items', NoItems);
 Vue.component("vee-text-field", VeeTextField);
 Vue.component("vee-form", VeeForm);
\ No newline at end of file