PART 3: Make usage of Suspense #fallback

src/App.vue

@@ -1,15 +1,21 @@
 <template>
   <router-view v-slot="{ Component }">
-    <Suspense>
+    <Suspense timeout="0">
       <template #default>
         <component :is="Component" />
       </template>
+      <template #fallback>
+        <Loading />
+      </template>
     </Suspense>
   </router-view>
 </template>
 
 <script>
+import Loading from './components/Loading.vue';
+
 export default {
   name: 'App',
+  components: { Loading },
 }
 </script>

src/pages/[city].vue

@@ -1,7 +1,6 @@
 <template>
-  <loading v-if="isLoading" />
   <success
-    v-else-if="isSuccess"
+    v-if="isSuccess"
     :city="weatherData.city"
     :weather="weatherData.weather"
     :temperature="weatherData.temperature"
@@ -14,14 +13,12 @@ import { ref, computed } from 'vue';
 
 // Components
 import Success from '../components/Success.vue';
-import Loading from '../components/Loading.vue';
 import Error from '../components/Error.vue';
 
 // Services
 import { getCurrentWeather } from '../services/openWeather.js';
 
 const STATES = {
-  LOADING: 'LOADING',
   SUCCESS: 'SUCCESS',
   ERROR: 'ERRROR',
 };
@@ -30,7 +27,6 @@ export default {
   name: 'City',
   components: {
     Success,
-    Loading,
     Error,
   },
   props: {
@@ -40,10 +36,9 @@ export default {
     },
   },
   async setup(props) {
-    const state = ref(STATES.LOADING);
+    const state = ref(null);
     const weatherData = ref({});
 
-    const isLoading = computed(() => state.value === STATES.LOADING);
     const isSuccess = computed(() => state.value === STATES.SUCCESS);
     const isError = computed(() => state.value === STATES.ERROR);
 
@@ -62,7 +57,7 @@ export default {
       state.value = STATES.ERROR;
     }
 
-    return { state, weatherData, isLoading, isSuccess, isError };
+    return { state, weatherData, isSuccess, isError };
   },
 };
 </script>

src/services/openWeather.js

@@ -17,9 +17,16 @@ const WEATHER_TYPE_EMOJI_MAP = {
   TORNADO: '🌪',
 };
 
+function asyncSetTimeout() {
+  return new Promise(resolve => setTimeout(resolve, 2000));
+}
+
 export async function getCurrentWeather(city) {
   const path = '/weather';
-  const response = await fetch(`${BASE_URL}${path}?q=${city}&appid=${API_KEY}&units=metric`);
+  const [ response ] = await Promise.all([
+    fetch(`${BASE_URL}${path}?q=${city}&appid=${API_KEY}&units=metric`),
+    asyncSetTimeout(),
+  ]);
 
   return response.json();
 }