SHow "Loading…" message when loading data from the API

flatisfy/web/js_src/store/getters.js

@@ -5,7 +5,7 @@ export default {
 
     flat: (state, getters) => id => state.flats.find(flat => flat.id === id),
 
-    isLoading: state => state.loading,
+        isLoading: state => state.loading > 0,
 
     postalCodesFlatsBuckets: (state, getters) => filter => {
         const postalCodeBuckets = {}

flatisfy/web/js_src/store/mutations.js

@@ -5,16 +5,15 @@ import * as types from './mutations-types'
 export const state = {
     flats: [],
     timeToPlaces: [],
-    loading: false
+    loading: 0
 }
 
 export const mutations = {
     [types.REPLACE_FLATS] (state, { flats }) {
-        state.loading = false
         state.flats = flats
+        state.loading -= 1
     },
     [types.MERGE_FLATS] (state, { flats }) {
-        state.loading = false
         flats.forEach(flat => {
             const flatIndex = state.flats.findIndex(storedFlat => storedFlat.id === flat.id)
 
@@ -24,33 +23,35 @@ export const mutations = {
                 state.flats.push(flat)
             }
         })
+        state.loading = false
+        state.loading -= 1
     },
     [types.UPDATE_FLAT_STATUS] (state, { flatId, newStatus }) {
-        state.loading = false
         const index = state.flats.findIndex(flat => flat.id === flatId)
         if (index > -1) {
             Vue.set(state.flats[index], 'status', newStatus)
         }
+        state.loading -= 1
     },
     [types.UPDATE_FLAT_NOTES] (state, { flatId, newNotes }) {
-        state.loading = false
         const index = state.flats.findIndex(flat => flat.id === flatId)
         if (index > -1) {
             Vue.set(state.flats[index], 'notes', newNotes)
         }
+        state.loading -= 1
     },
     [types.UPDATE_FLAT_NOTATION] (state, { flatId, newNotation }) {
-        state.loading = false
         const index = state.flats.findIndex(flat => flat.id === flatId)
         if (index > -1) {
             Vue.set(state.flats[index], 'notation', newNotation)
         }
+        state.loading -= 1
     },
     [types.RECEIVE_TIME_TO_PLACES] (state, { timeToPlaces }) {
-        state.loading = false
         state.timeToPlaces = timeToPlaces
+        state.loading -= 1
     },
     [types.IS_LOADING] (state) {
-        state.loading = true
+        state.loading += 1
     }
 }

flatisfy/web/js_src/views/details.vue

@@ -1,6 +1,9 @@
 <template>
     <div>
-        <div class="grid" v-if="flat && timeToPlaces">
+        <template v-if="isLoading">
+            <p>{{ $t("common.loading") }}</p>
+        </template>
+        <div class="grid" v-else-if="flat && timeToPlaces">
             <div class="left-panel">
                 <h2>
                     (<!--
@@ -168,9 +171,6 @@
                 </nav>
             </div>
         </div>
-        <template v-else>
-            <p>{{ $t("common.loading") }}</p>
-        </template>
     </div>
 </template>
 
@@ -213,6 +213,9 @@ export default {
     },
 
     computed: {
+        isLoading () {
+            return this.$store.getters.isLoading
+        },
         title () {
             return 'Flatisfy - ' + this.$route.params.id
         },

flatisfy/web/js_src/views/home.vue

@@ -1,22 +1,21 @@
 <template>
     <div>
-        <template v-if="postalCodesFlatsBuckets && flatsMarkers">
         <FlatsMap :flats="flatsMarkers" :places="timeToPlaces"></FlatsMap>
 
         <h2>{{ $t("home.new_available_flats") }}</h2>
+
         <template v-if="Object.keys(postalCodesFlatsBuckets).length > 0">
             <template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets">
                 <h3>{{ postal_code_data.name }} ({{ postal_code }}) - {{ postal_code_data.flats.length }} {{ $tc("common.flats", postal_code_data.flats.length) }}</h3>
                 <FlatsTable :flats="postal_code_data.flats"></FlatsTable>
             </template>
         </template>
+        <template v-else-if="isLoading">
+            <p>{{ $t("common.loading") }}</p>
+        </template>
         <template v-else>
             <p>{{ $t("flatListing.no_available_flats") }}</p>
         </template>
-        </template>
-        <template v-else>
-            <p>{{ $t("common.loading") }}</p>
-        </template>
     </div>
 </template>
 
@@ -48,6 +47,9 @@ export default {
         },
         timeToPlaces () {
             return this.$store.getters.allTimeToPlaces
+        },
+        isLoading () {
+            return this.$store.getters.isLoading
         }
     }
 }

flatisfy/web/js_src/views/search.vue

@@ -9,8 +9,8 @@
         </form>
 
         <h2>Results</h2>
-        <template v-if="loading">
+        <template v-if="isLoading">
-            {{ $t("common.loading") }}
+            <p>{{ $t("common.loading") }}</p>
         </template>
         <template v-else-if="Object.keys(postalCodesFlatsBuckets).length > 0">
             <template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets">
@@ -60,7 +60,7 @@ export default {
                 flat => flat.status !== 'duplicate' && flat.status !== 'ignored' && flat.status !== 'user_deleted'
             )
         },
-        loading () {
+        isLoading () {
             return this.$store.getters.isLoading
         }
     },

flatisfy/web/js_src/views/status.vue

@@ -13,7 +13,11 @@
                 </li>
             </ul>
         </h2>
-        <template v-if="Object.keys(postalCodesFlatsBuckets).length">
+
+        <template v-if="isLoading">
+            <p>{{ $t("common.loading") }}</p>
+        </template>
+        <template v-else-if="Object.keys(postalCodesFlatsBuckets).length">
             <template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets">
                 <h3>{{ postal_code_data.name }} ({{ postal_code }}) - {{ postal_code_data.flats.length }} {{ $tc("common.flats", postal_code_data.flats.length) }}</h3>
                 <FlatsTable
@@ -82,6 +86,9 @@ export default {
         },
         title () {
             return 'Flatisfy - ' + capitalize(this.$t('status.' + this.$route.params.status))
+        },
+        isLoading () {
+            return this.$store.getters.isLoading
         }
     },