From 718791e95fadfdf709cfd4a108d6b0db3bc93a6f Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Tue, 28 Aug 2018 16:30:50 +0200
Subject: [PATCH] Use a loader when lazy loading Map view, to ensure a direct
 feedback is given to the user

---
 src/router/index.js   |  7 +++----
 src/views/LazyMap.vue | 16 ++++++++++++++++
 src/views/Loading.vue | 19 +++++++++++++++++++
 3 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 src/views/LazyMap.vue
 create mode 100644 src/views/Loading.vue

diff --git a/src/router/index.js b/src/router/index.js
index 7756d5b..1222377 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,13 +4,12 @@ import Router from 'vue-router';
 import store from '@/store';
 
 import About from '@/views/About.vue';
+import LazyMap from '@/views/LazyMap.vue';
 import Onboarding from '@/views/Onboarding.vue';
 import Settings from '@/views/Settings.vue';
 
 Vue.use(Router);
 
-const Map = () => import('@/views/Map.vue');
-
 export default new Router({
     routes: [
         {
@@ -21,12 +20,12 @@ export default new Router({
         {
             path: '/map=:zoom/:lat/:lng',
             name: 'SharedMap',
-            component: Map,
+            component: LazyMap,
         },
         {
             path: '/map',
             name: 'Map',
-            component: Map,
+            component: LazyMap,
             beforeEnter: (to, from, next) => {
                 if (to.name !== 'SharedMap') {
                     // Check that intro was seen except if we are in SharedMap view.
diff --git a/src/views/LazyMap.vue b/src/views/LazyMap.vue
new file mode 100644
index 0000000..1f699ae
--- /dev/null
+++ b/src/views/LazyMap.vue
@@ -0,0 +1,16 @@
+<template>
+    <Map></Map>
+</template>
+
+<script>
+import Loading from '@/views/Loading.vue';
+
+export default {
+    components: {
+        Map: () => ({
+            component: import('@/views/Map.vue'),
+            loading: Loading,
+        }),
+    },
+};
+</script>
diff --git a/src/views/Loading.vue b/src/views/Loading.vue
new file mode 100644
index 0000000..737c714
--- /dev/null
+++ b/src/views/Loading.vue
@@ -0,0 +1,19 @@
+<template>
+    <v-container fluid fill-height class="no-padding">
+        <v-layout row wrap fill-height>
+            <v-flex xs12 class="text-xs-center">
+                <v-progress-circular
+                    :size="70"
+                    :width="7"
+                    color="blue"
+                    indeterminate
+                    ></v-progress-circular>
+            </v-flex>
+        </v-layout>
+    </v-container>
+</template>
+
+<script>
+export default {
+};
+</script>