From adb520b54d44d6de0987796507ecb3b976c872ef Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Fri, 12 May 2017 16:27:31 +0200
Subject: [PATCH] =?UTF-8?q?SHow=20"Loading=E2=80=A6"=20message=20when=20lo?=
 =?UTF-8?q?ading=20data=20from=20the=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 flatisfy/web/js_src/store/getters.js   |  2 +-
 flatisfy/web/js_src/store/mutations.js | 17 +++++++++--------
 flatisfy/web/js_src/views/details.vue  | 11 +++++++----
 flatisfy/web/js_src/views/home.vue     | 26 ++++++++++++++------------
 flatisfy/web/js_src/views/search.vue   |  6 +++---
 flatisfy/web/js_src/views/status.vue   |  9 ++++++++-
 6 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/flatisfy/web/js_src/store/getters.js b/flatisfy/web/js_src/store/getters.js
index e93fe6b..539948c 100644
--- a/flatisfy/web/js_src/store/getters.js
+++ b/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 = {}
diff --git a/flatisfy/web/js_src/store/mutations.js b/flatisfy/web/js_src/store/mutations.js
index 69d1559..e7c30e5 100644
--- a/flatisfy/web/js_src/store/mutations.js
+++ b/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
     }
 }
diff --git a/flatisfy/web/js_src/views/details.vue b/flatisfy/web/js_src/views/details.vue
index b0abbe8..9d42bb6 100644
--- a/flatisfy/web/js_src/views/details.vue
+++ b/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
         },
diff --git a/flatisfy/web/js_src/views/home.vue b/flatisfy/web/js_src/views/home.vue
index 6f41ce8..9c32996 100644
--- a/flatisfy/web/js_src/views/home.vue
+++ b/flatisfy/web/js_src/views/home.vue
@@ -1,22 +1,21 @@
 <template>
     <div>
-        <template v-if="postalCodesFlatsBuckets && flatsMarkers">
-            <FlatsMap :flats="flatsMarkers" :places="timeToPlaces"></FlatsMap>
+        <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>
-                <p>{{ $t("flatListing.no_available_flats") }}</p>
+        <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>
+        <template v-else-if="isLoading">
             <p>{{ $t("common.loading") }}</p>
         </template>
+        <template v-else>
+            <p>{{ $t("flatListing.no_available_flats") }}</p>
+        </template>
     </div>
 </template>
 
@@ -48,6 +47,9 @@ export default {
         },
         timeToPlaces () {
             return this.$store.getters.allTimeToPlaces
+        },
+        isLoading () {
+            return this.$store.getters.isLoading
         }
     }
 }
diff --git a/flatisfy/web/js_src/views/search.vue b/flatisfy/web/js_src/views/search.vue
index 62a8491..dd164d6 100644
--- a/flatisfy/web/js_src/views/search.vue
+++ b/flatisfy/web/js_src/views/search.vue
@@ -9,8 +9,8 @@
         </form>
 
         <h2>Results</h2>
-        <template v-if="loading">
-            {{ $t("common.loading") }}
+        <template v-if="isLoading">
+            <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
         }
     },
diff --git a/flatisfy/web/js_src/views/status.vue b/flatisfy/web/js_src/views/status.vue
index 7799bf4..bf53595 100644
--- a/flatisfy/web/js_src/views/status.vue
+++ b/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
         }
     },