Use a loader when lazy loading Map view, to ensure a direct feedback is given to the user

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.

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>

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>