Merge pull request #407 from Seluj78/257-loading-icons

Author: Seluj78

frontend/src/components/app/users/User.vue

@@ -1,11 +1,14 @@
 <template>
   <!-- eslint-disable max-len -->
   <div class="sm:mx-16 lg:mx-32">
-    <section class="mx-auto">
+    <div v-if="!user" class="mx-auto flex items-center justify-center mt-32">
+      <img class="h-36" src="../../../assets/loading.svg">
+    </div>
+    <section v-else class="mx-auto">
       <div v-on:click="goBack()" class="sort-button py-0 ml-auto rounded-md text-lg w-20 md:w-16 mr-4 sm:mr-0 mb-4">
         <h1 class="noSelect">←</h1>
       </div>
-      <div v-if="user" class="md:flex md:items-start">
+      <div class="md:flex md:items-start">
         <UserImages v-bind:images="user.images" v-bind:gender="user.gender" class="md:w-7/12 md:order-2 sm:rounded-t md:rounded-r-md md:rounded-l-none"></UserImages>
         <UserProfile class="md:w-5/12 md:order-1 md:overflow-scroll md:border-b md:border-l md:rounded-l-md" v-bind:user="user"></UserProfile>
       </div>

frontend/src/components/shared/FilterSlider.vue

@@ -3,8 +3,8 @@
     <div class="mb-8" ref="sliderDropdown">
       <div class="mx-auto flex w-full items-center mb-4 max-w-md">
         <div class="w-full flex justify-between">
-          <h1 class="text-xl text-purple-matcha capitalize">{{ name }}</h1>
-          <h1 class="text-xl text-purple-matcha">
+          <h1 class="text-base text-purple-matcha capitalize">{{ name }}</h1>
+          <h1 class="text-base text-purple-matcha">
             <span class="">{{this.slider.startMin}}<span v-if="oneHandle"> {{this.unit}}</span></span>
             <span v-if="!oneHandle"> to </span>
             <span v-if="!oneHandle" class="">{{this.slider.startMax}} {{this.unit}}</span></h1>

frontend/src/components/shared/MultipleFilters.vue

@@ -5,7 +5,7 @@
     <h1 class="text-md text-left opacity-50 mb-4">{{ info }}</h1>
     <div class="h-48 w-auto overflow-scroll rounded-md border border-gray-300 bg-white">
       <h1 v-for="(option, index) in options" :key="option + index + option"
-          v-bind:class="{'sort-dropdown-option': true, 'text-lg': true, 'border-b': index !== options.length - 1, 'capitalize': true,
+          v-bind:class="{'sort-dropdown-option': true, 'text-base': true, 'border-b': index !== options.length - 1, 'capitalize': true,
           'font-extrabold': selectedFilters.indexOf(option) !== -1, 'text-gray-matcha': selectedFilters.indexOf(option) !== -1}"
           v-on:click="select(option)">
         {{option}}

frontend/src/views/app/Browse.vue

@@ -2,6 +2,9 @@
   <!-- eslint-disable max-len -->
   <div class="mx-4 sm:mx-16 lg:mx-32">
     <section class="mx-auto">
+      <div v-if="!recommendationsAnalysisDone" class="flex items-center justify-center mt-32">
+        <img class="h-36" src="../../assets/loading.svg">
+      </div>
       <Recommendations
         v-if="recommendationsAnalysisDone"
         v-bind:title="'Potential matches'"

frontend/src/views/app/History.vue

@@ -1,7 +1,10 @@
 <template>
   <!-- eslint-disable max-len -->
   <div class="mx-4 sm:mx-16 lg:mx-32">
-    <section class="mx-auto mt-4">
+    <div v-if="!historyFetched" class="mx-auto flex items-center justify-center mt-32">
+      <img class="h-36" src="../../assets/loading.svg">
+    </div>
+    <section v-else class="mx-auto mt-4">
       <div class="flex items-center justify-center md:justify-start w-full mb-4">
         <h1
           class="text-3xl sm:text-5xl my-4 inline-block text-center leading-none onboarding-sub-container-content-heading">
@@ -55,6 +58,7 @@ export default {
     },
     recommendationsAnalysisDone: false,
     filteredCount: null,
+    historyFetched: false,
   }),
   methods: {
     async fetchUsers(request) {
@@ -108,6 +112,7 @@ export default {
           }
         }
       }
+      this.historyFetched = true;
       this.recommendationsAnalysisDone = true;
     },
     browseAgain() {
@@ -120,6 +125,7 @@ export default {
       this.recommendationsAnalysis.popularity.max = null;
       this.recommendationsAnalysis.interests = [];
       this.recommendationsAnalysisDone = false;
+      this.historyFetched = false;
     },
     updateHistory(...args) {
       const [key, value] = args;

frontend/src/views/app/Matches.vue

@@ -1,6 +1,9 @@
 <template>
   <!--  eslint-disable max-len -->
   <div class="mx-4 sm:mx-16 lg:mx-32">
+    <div v-if="!fetchingDone" class="mx-auto flex items-center justify-center mt-32">
+      <img class="h-36" src="../../assets/loading.svg">
+    </div>
     <section v-if="fetchingDone" class="mx-auto relative md:flex md:items-start md:justify-center">
       <div class="md:w-full md:max-w-xs md:shadow-md md:rounded-md md:p-8 md:flex md:flex-col md:justify-start">
         <div class="mt-8 sm:mt-0">

frontend/src/views/app/Search.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- eslint-disable max-len -->
   <div class="mx-4 sm:mx-16 lg:mx-32">
+    <div v-if="!recommendationsAnalysisDone && !sliderValuesFetched" class="mx-auto flex items-center justify-center mt-32">
+      <img class="h-36" src="../../assets/loading.svg">
+    </div>
     <section v-if="recommendationsAnalysisDone" class="mx-auto">
       <div class="sort-button rounded-md text-lg lg:text-2xl w-24 ml-auto" v-on:click="searchAgain()">
         <h1 class="noSelect capitalize">←</h1>
@@ -13,30 +16,30 @@
     <section v-on:click="setError(null)"
              v-if="!recommendationsAnalysisDone && sliderValuesFetched"
              class="flex flex-col my-8 md:my-12">
-        <div><img src="../../assets/search.png" class="w-20 mb-4 mx-auto"></div>
-        <div>
-          <FilterSlider
-            v-bind:min="sliders.age.min"
-            v-bind:max="sliders.age.max"
-            v-bind:name="'age'"
-            v-on:save-filter="saveFilter"></FilterSlider>
-          <FilterSlider
-            v-bind:min="1"
-            v-bind:max="2000"
-            v-bind:unit="'km'"
-            v-bind:oneHandle="true"
-            v-bind:name="'distance'"
-            v-on:save-filter="saveFilter"></FilterSlider>
-          <FilterSlider
-            v-bind:min="sliders.popularity.min"
-            v-bind:max="sliders.popularity.max"
-            v-bind:unit="'pts'"
-            v-bind:name="'popularity'"
-            v-on:save-filter="saveFilter"></FilterSlider>
-        </div>
-        <div>
-          <MultipleFilters
-            v-bind:options="[
+      <div><img src="../../assets/search.png" class="w-20 mb-4 mx-auto"></div>
+      <div>
+        <FilterSlider
+          v-bind:min="sliders.age.min"
+          v-bind:max="sliders.age.max"
+          v-bind:name="'age'"
+          v-on:save-filter="saveFilter"></FilterSlider>
+        <FilterSlider
+          v-bind:min="1"
+          v-bind:max="2000"
+          v-bind:unit="'km'"
+          v-bind:oneHandle="true"
+          v-bind:name="'distance'"
+          v-on:save-filter="saveFilter"></FilterSlider>
+        <FilterSlider
+          v-bind:min="sliders.popularity.min"
+          v-bind:max="sliders.popularity.max"
+          v-bind:unit="'pts'"
+          v-bind:name="'popularity'"
+          v-on:save-filter="saveFilter"></FilterSlider>
+      </div>
+      <div>
+        <MultipleFilters
+          v-bind:options="[
             'swimming', 'wine', 'reading', 'foodie', 'netflix', 'music', 'yoga', 'golf',
             'photography', 'baking', 'shopping', 'outdoors', 'art', 'travel', 'hiking',
             'running', 'volunteering', 'cycling', 'climbing', 'tea', 'fishing', 'soccer',
@@ -47,14 +50,17 @@
             'language exchange', 'sports', 'comedy', 'fashion', 'disney', 'vlogging',
             'astrology', 'board games', 'craft beer', 'coffee', 'writer',
           ]"
-            v-bind:name="'interests'"
-            v-bind:info="'If no selected, all are accounted.'"
-            v-on:save-filter-multiple="saveFilterMultiple"></MultipleFilters>
-        </div>
+          v-bind:name="'interests'"
+          v-bind:info="'If no selected, all are accounted.'"
+          v-on:save-filter-multiple="saveFilterMultiple"></MultipleFilters>
+      </div>
       <div class="auth-sub-container-error mx-auto max-w-md" v-if="error"><h1 class="auth-sub-container-error-message">{{ error }}</h1></div>
       <div class="mx-auto w-full max-w-md">
-        <h1 v-on:click="search()" class="onboarding-sub-container-content-button-outline w-48 text-lg font-normal max-w-full bg-purple-matcha w-full text-white-matcha mx-auto">
+        <h1 v-if="!submitted" v-on:click="search()" class="onboarding-sub-container-content-button-outline w-48 text-lg font-normal max-w-full bg-purple-matcha w-full text-white-matcha mx-auto">
           Search</h1>
+        <div v-else class="flex items-center justify-center mt-4">
+          <img class="h-12" src="../../assets/loading.svg">
+        </div>
       </div>
     </section>
   </div>
@@ -103,6 +109,7 @@ export default {
     },
     recommendationsAnalysisDone: false,
     error: null,
+    submitted: false,
   }),
   methods: {
     saveFilter(...range) {
@@ -122,15 +129,21 @@ export default {
       const sliderRangesRequest = await this.$http.get('/search/values');
       const values = sliderRangesRequest.data.search_minmax;
       this.sliders.age.min = values.min_age;
+      this.filters.age.min = values.min_age;
       if (this.sliders.age.min < 18) {
         this.sliders.age.min = 18;
+        this.filters.age.min = 18;
       }
       this.sliders.age.max = values.max_age;
+      this.filters.age.max = values.max_age;
       this.sliders.popularity.min = values.min_score;
+      this.filters.popularity.min = values.min_score;
       this.sliders.popularity.max = values.max_score;
+      this.filters.popularity.max = values.max_score;
       this.sliderValuesFetched = true;
     },
     async search() {
+      this.submitted = true;
       const searchRequest = await this.$http.post('/search', {
         min_age: this.filters.age.min,
         max_age: this.filters.age.max,
@@ -154,6 +167,7 @@ export default {
       }
       this.recommendations = searchRequest.data.search_results;
       if (this.recommendations.length === 0) {
+        this.submitted = false;
         this.setError('0 profiles found. Please, try expanding your search criteria.');
         return;
       }
@@ -169,6 +183,7 @@ export default {
           this.recommendations[i].interests.push(interests[j].name);
         }
       }
+      this.submitted = false;
       this.recommendationsAnalysisDone = true;
       this.scrollToTop();
     },

frontend/src/views/app/Settings.vue

@@ -1,7 +1,10 @@
 <template>
   <!-- eslint-disable max-len -->
   <div class="w-full md:w-auto md:mx-16 lg:mx-32 relative md:flex items-start h-auto md:mb-16">
-    <section class="w-auto md:max-w-xss md:shadow-md md:rounded-md">
+    <div v-if="!settingsFetched" class="mx-auto flex items-center justify-center mt-32">
+      <img class="h-36" src="../../assets/loading.svg">
+    </div>
+    <section v-if="settingsFetched" class="w-auto md:max-w-xss md:shadow-md md:rounded-md">
       <div class="w-full md:hidden h-1 bg-white-matcha"></div>
       <div class="md:border-b profile-card text-wrap p-16 md:py-8 flex flex-col w-full md:rounded-t-md">
         <div class="mx-auto overflow-hidden w-48 h-48 md:w-24 md:h-24 rounded-full">
@@ -26,7 +29,7 @@
         <MenuButton v-on:click.native="showSetting('profile')" v-bind:class="{'md:px-8':true, 'md:bg-purple-200': getShow === 'profile'}" v-bind:text="'Profile'"></MenuButton>
       </div>
     </section>
-    <section v-if="getShow === 'account'" class="flex flex-col items-center z-10 absolute bg-white-matcha px-8 md:pb-8 w-full top-0 left-0 h-full md:h-auto md:ml-4 md:relative md:shadow-md md:rounded-md">
+    <section v-if="getShow === 'account' && settingsFetched" class="flex flex-col items-center z-10 absolute bg-white-matcha px-8 md:pb-8 w-full top-0 left-0 h-full md:h-auto md:ml-4 md:relative md:shadow-md md:rounded-md">
       <SectionHeader v-bind:name="'account'" v-on:click.native="closeSetting()"></SectionHeader>
       <AccountInput
         v-bind:name="'First Name'"
@@ -49,7 +52,7 @@
         v-bind:type="'password'"
         v-bind:currentValuePassed="''"></AccountInput>
     </section>
-    <section v-if="getShow === 'profile'" class="flex flex-col items-start z-10 absolute bg-white-matcha w-full top-0 left-0 md:ml-4 md:relative md:shadow-md md:rounded-md">
+    <section v-if="getShow === 'profile' && settingsFetched" class="flex flex-col items-start z-10 absolute bg-white-matcha w-full top-0 left-0 md:ml-4 md:relative md:shadow-md md:rounded-md">
       <div class="px-8 w-full">
         <SectionHeader class="mx-auto" v-bind:name="'profile'" v-on:click.native="closeSetting()"></SectionHeader>
       </div>
@@ -104,18 +107,24 @@
       <div class="text-center px-8 py-8 border-t border-gray-300 w-full">
         <h1 class="inline-block mr-3 font-bold text-gray-matcha leading-none">Location</h1>
         <h1 class="text-md font-normal opacity-50 text-gray-matcha mx-auto pb-2 max-w-sm">If you refused sharing location, it will be approximated from your computer address </h1>
-        <h1 v-if="!locationUpdateSuccess" class="mx-auto onboarding-sub-container-content-button-outline max-w-sm border font-normal mt-2 px-2 cursor-pointer" v-on:click="updateLocation()">Update current location</h1>
-        <h1 v-else class="mx-auto onboarding-sub-container-content-button-outline max-w-sm border font-normal mt-2 px-2 cursor-pointer text-green-500">Success</h1>
+        <h1 v-if="!locationUpdateSuccess && !fetching" class="mx-auto onboarding-sub-container-content-button-outline max-w-sm border font-normal mt-2 px-2 cursor-pointer" v-on:click="updateLocation()">Update current location</h1>
+        <h1 v-if="locationUpdateSuccess && !fetching" class="mx-auto onboarding-sub-container-content-button-outline max-w-sm border font-normal mt-2 px-2 cursor-pointer text-green-500">Success</h1>
+        <div v-if="fetching" class="mx-auto flex items-center justify-center mt-4">
+          <img class="h-12" src="../../assets/loading.svg">
+        </div>
       </div>
       <div class="text-center py-8 w-full px-8 border-t border-gray-300">
         <h1 class="font-bold text-gray-matcha">Images<span class="text-md font-normal ml-2 opacity-50 text-gray-matcha">{{this.$store.getters.getLoggedInUser.images.length}} / 5</span></h1>
         <div class="auth-sub-container-error mt-8" v-if="image.error">
           <h1 class="auth-sub-container-error-message">{{image.error}}</h1>
         </div>
-        <button v-if="this.$store.getters.getLoggedInUser.images.length < 6" class="overflow-hidden relative onboarding-sub-container-content-button-outline border w-full max-w-sm my-4">
+        <button v-if="this.$store.getters.getLoggedInUser.images.length < 5 && !fetchingImages" class="overflow-hidden relative onboarding-sub-container-content-button-outline border w-full max-w-sm my-4">
           <input style="padding-left: 100%;" class="cursor-pointer opacity-0 absolute top-0 left-0 w-full h-full rounded-md" type="file" v-on:change="selectFile()" ref="file">
           <img src="../../assets/onboarding/cloudPurple.png" class="w-8 mx-auto">
         </button>
+        <div v-if="fetchingImages" class="mx-auto flex items-center justify-center mt-4">
+          <img class="h-12" src="../../assets/loading.svg">
+        </div>
         <ProfileImage
           v-for="image in this.$store.getters.getLoggedInUser.images"
           :key="image.id"
@@ -157,6 +166,9 @@ export default {
       error: null,
     },
     locationUpdateSuccess: false,
+    settingsFetched: false,
+    fetching: false,
+    fetchingImages: false,
   }),
   computed: {
     getShow() {
@@ -165,6 +177,7 @@ export default {
   },
   methods: {
     async updateLocation() {
+      this.fetching = true;
       navigator.geolocation.getCurrentPosition(
         this.locationAllowed,
         this.locationDenied,
@@ -176,6 +189,7 @@ export default {
       const { longitude } = position.coords;
       const locationData = { lat: latitude, lng: longitude, ip: '0.0.0.0' };
       await this.$http.put('/profile/edit/geolocation', locationData);
+      this.fetching = false;
       this.locationUpdateSuccess = true;
       setTimeout(() => {
         this.locationUpdateSuccess = false;
@@ -187,13 +201,15 @@ export default {
       const { ip } = ipRequest;
       const locationData = { ip };
       await this.$http.put('/profile/edit/geolocation', locationData);
+      this.fetching = false;
       this.locationUpdateSuccess = true;
       setTimeout(() => {
         this.locationUpdateSuccess = false;
       }, 3000);
     },
     async selectFile() {
       this.image.error = '';
+      this.fetchingImages = true;
       const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
       const file = this.$refs.file.files[0];
 
@@ -214,6 +230,7 @@ export default {
       }
       const user = await this.$http.get(`/users/${this.$store.getters.getLoggedInUser.id}`);
       await this.$store.dispatch('login', user.data);
+      this.fetchingImages = false;
     },
     async deleteImage(...args) {
       const [imageId] = args;
@@ -288,6 +305,7 @@ export default {
     }
     const userViewsReceivedRequest = await this.$http.get('/history/viewed/me');
     this.userViewsReceived = userViewsReceivedRequest.data.viewed_me.length;
+    this.settingsFetched = true;
   },
 };
 </script>

frontend/src/views/auth/ForgotPassword.vue

@@ -10,14 +10,17 @@
         <h1 class="auth-sub-container-content-heading">Forgot password?</h1>
         <h1 class="text-sm text-gray-matcha text-center">Enter your email and we will send you a link, so you can log in again</h1>
       </div>
-      <div class="auth-sub-container-content mt-4" v-if="!forgotPasswordEmailSent">
-        <ValidationObserver v-slot="{ handleSubmit, invalid }">
+      <div class="auth-sub-container-content mt-4 w-full" v-if="!forgotPasswordEmailSent">
+        <ValidationObserver v-slot="{ handleSubmit, invalid }" class="w-full">
           <form @submit.prevent="handleSubmit(onSubmit)">
             <ValidationProvider name="Email" rules="required|email|max:50" v-slot="{errors}">
               <input type="email" placeholder="Email" v-model="formData.email" class="matcha-input">
               <span class="matcha-input-error">{{ errors[0] }}</span>
             </ValidationProvider>
-            <input type="submit" :disabled="invalid" value="Send reset link" 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="Send reset link" 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>
@@ -47,15 +50,19 @@ export default {
       happened: false,
       message: '',
     },
+    submitted: false,
   }),
   methods: {
     async onSubmit() {
       try {
+        this.submitted = true;
         this.clearError();
         await this.sendResetPasswordLink();
         this.forgotPasswordEmailSent = true;
+        this.submitted = false;
       } catch (error) {
         this.displayError(this.$errorMessenger(error));
+        this.submitted = false;
       }
     },
     async sendResetPasswordLink() {