loading indicator

Author: ferrywlto

ClientApp/app.js

@@ -3,6 +3,7 @@ import App from './components/App.vue';
 import store from './vuex/store.js';
 import router from './router';
 
+
 const app = new Vue({
     router,
     store,

ClientApp/components/Messages.vue

@@ -8,6 +8,7 @@
 <script>
 import {mapGetters, mapActions} from 'vuex';
 import Message from './Message.vue';
+
 export default {
   components: { Message },
   computed: mapGetters(['messages', 'lastFetchedMessageDate']),

ClientApp/vuex/actions.js

@@ -1,18 +1,26 @@
 import axios from 'axios';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css'; // <- this line is required
 
 export const fetchInitialMessages = ({ commit }) => {
+    NProgress.start();
     axios.get('initialMessages').then(response => {
         commit("INITIAL_MESSAGES", response.data);
+        NProgress.done();
     }).catch(err => {
         console.log(err);
+        NProgress.done();
     });
 };
 
 export const fetchMessages = ({ commit }, lastFetchedMessageDate) => {
+    NProgress.start();
     axios.get('/fetchMessages?lastFetchedMessageDate='+lastFetchedMessageDate)
     .then(response => {
         commit("FETCH_MESSAGES", response.data);
+        NProgress.done();
     }).catch(err => {
         console.log(err);
+        NProgress.done();
     });
 };

Controllers/HomeController.cs

@@ -3,6 +3,7 @@
 using System.Diagnostics;
 using System.Linq;
 using System.Threading.Tasks;
+using System.Threading;
 using Microsoft.AspNetCore.Mvc;
 
 namespace vdn.Controllers
@@ -16,6 +17,9 @@ public IActionResult Index()
 
         [Route("initialMessages")]
         public JsonResult initialMessages(){
+            //Added to simulate initial loading from remote server
+            Thread.Sleep(2000);
+
             var initialMessages = FakeMessageStore.FakeMessages.OrderByDescending(m => m.Date)
             .Take(2);
 

README.md

@@ -2,6 +2,14 @@ This repository is a clone from Stu Ratcliffe [Server rendering Vue.js applicati
 
 Following his articile and trying to have some write up. (e.g. using latest packages in package.json)
 
+## Install and run:
+if Webpack is not installed yet:
+`npm install -g webpack
+
+`dotnet restore
+npm install
+webpack
+dotnet run`
 ## Packages used:
 - lodash <- similiar to numpy in Python, utilies library for manipulating array/object.
 - axios <- Promise based HTTP client for the browser and Node.js, think of $.ajax() if you come from jQuery world
@@ -26,4 +34,29 @@ Following his articile and trying to have some write up. (e.g. using latest pack
 7. Move back to ClientApp folder
 8. Modify app.js
 9. Move back to .
-10. Modify Startup.cs
+10. Modify Startup.cs
+### Loading indicator:
+Here we try to modify the implementation order different from the original post.
+We are going to add the loading indicator before implementing the Server Side Rendering.
+To simulate timely API call form remote server, we add the following line in HomeController.cs:
+`public JsonResult initialMessages(){
+    //Added to simulate initial loading from remote server
+    Thread.Sleep(2000);
+    ...
+}`
+
+1. Add nprogess in package.json dependency:
+`"dependencies": {
+    "vue": "^2.5.8",
+    "vuex": "^3.0.1",
+    "vue-router": "^3.0.1",
+    "lodash": "^4.17.4",
+    "axios": "^0.17.1",
+    "nprogress": "^0.2.0"
+  },`
+2. Add style-loader and css-loader to webpack.config:
+`{ 
+    test: /\.css$/, 
+    loader: "style-loader!css-loader" 
+}`
+3. Modify ClientApp/vuex/actions.js, add `NProgress.start()` and `NProgress.done()` before and after axios remote call. 

Startup.cs

@@ -47,6 +47,7 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerF
             app.UseMvc(routes =>
             {
                 routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index"});
+                
                 routes.MapRoute(
                     name: "default",
                     template: "{controller=Home}/{action=Index}/{id?}");

package.before_loading_indicator.json

@@ -0,0 +1,31 @@
+{
+  "name": "vdn",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Ferry To",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "vue": "^2.5.8",
+    "vuex": "^3.0.1",
+    "vue-router": "^3.0.1",
+    "lodash": "^4.17.4",
+    "axios": "^0.17.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "vue-loader": "^13.5.0",
+    "vue-template-compiler": "^2.5.8",
+    "css-loader": "^0.28.7",
+    "aspnet-webpack": "^2.0.1",
+    "webpack": "^3.8.1",
+    "webpack-hot-middleware": "^2.20.0"
+  }
+}

package.json

@@ -14,7 +14,8 @@
     "vuex": "^3.0.1",
     "vue-router": "^3.0.1",
     "lodash": "^4.17.4",
-    "axios": "^0.17.1"
+    "axios": "^0.17.1",
+    "nprogress": "^0.2.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
@@ -24,6 +25,7 @@
     "vue-loader": "^13.5.0",
     "vue-template-compiler": "^2.5.8",
     "css-loader": "^0.28.7",
+    "style-loader": "^0.19.0",
     "aspnet-webpack": "^2.0.1",
     "webpack": "^3.8.1",
     "webpack-hot-middleware": "^2.20.0"

webpack.config.js

@@ -17,6 +17,10 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel-loader',
         exclude: /node_modules/
+      },
+      { 
+          test: /\.css$/, 
+          loader: "style-loader!css-loader" 
       }
     ]
   }