Added loading progress bar.

Gvc.ClientApp/nuxt.config.js

@@ -24,7 +24,7 @@ export default {
     /*
     ** Customize the progress-bar color
     */
-    loading: { color: '#fff' },
+    loading: { color: '#ff8c00' },
     /*
     ** Global CSS
     */

Gvc.ClientApp/pages/about.vue

@@ -37,12 +37,16 @@
     },
     methods: {
       async getSocialMediaLinks() {
-        this.socialMediaLinks = await this.$axios.$get('/api/about')
+        this.socialMediaLinks = await this.$axios.$get('/api/about', { progress: true })
       }
     },
-    mounted() {
-      this.getSocialMediaLinks();
-    }
+    mounted () {
+    this.$nextTick(() => {
+        this.$nuxt.$loading.start();
+        this.getSocialMediaLinks();
+        setTimeout(() => this.$nuxt.$loading.finish(), 500);
+    })
+  }
   }
 </script>
 

Gvc.ClientApp/pages/index.vue

@@ -18,6 +18,12 @@
       return {
         title: 'GVC - Software Engineer - MCSD'
       }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.$nuxt.$loading.start();
+            setTimeout(() => this.$nuxt.$loading.finish(), 500);
+        })
     }
   }
 </script>

Gvc.Web/VueHelper.cs

@@ -17,7 +17,7 @@ public static class VueHelper
         // default port number of 'npm run serve'
         private static int Port { get; } = 3000;
         private static Uri DevelopmentServerEndpoint { get; } = new Uri($"http://localhost:{Port}");
-        private static TimeSpan Timeout { get; } = TimeSpan.FromSeconds(30);
+        private static TimeSpan Timeout { get; } = TimeSpan.FromMinutes(1);
         // done message of 'npm run serve' command.
         private static string DoneMessage { get; } = "DONE  Compiled successfully in";