Add nprogress dependency for loading bar

frontend/src/App.vue

@@ -154,7 +154,10 @@
 			<span class='fa fa-bars header__menu_button' @click='toggleMenu'></span>
 		</header>
 		<not-found v-show='$store.state.show404Page'></not-found>
-		<router-view v-show='!$store.state.show404Page'></router-view>
+		
+		<transition name='fade'>
+			<router-view v-show='!$store.state.show404Page'></router-view>
+		</transition>
 	</div>
 </template>
 
@@ -406,6 +409,7 @@
 	@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700');
 	@import './assets/scss/variables.scss';
 	@import './assets/scss/elementStyles.scss';
+	@import './assets/scss/nprogress.scss';
 
 	html, body {
 		width: 100%;

frontend/src/assets/scss/nprogress.scss

@@ -0,0 +1,55 @@
+@import './variables.scss';
+
+$color: $color__blue--primary;
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: $color;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px $color, 0 0 5px $color;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+

frontend/src/main.js

@@ -1,6 +1,9 @@
+import NProgress from 'nprogress'
 import IO from 'socket.io-client'
 window.socket = IO()
 
+console.log(NProgress)
+
 socket.on('disconnect', () => {
 	socket.connect('http://localhost:3000', {
 		reconnection: true,
@@ -91,8 +94,13 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-	next()
 	router.app.$store.commit('set404Page', false)
+	NProgress.start()
+	next()
+})
+router.afterEach(() => {
+	NProgress.done()
+//	debugger
 })
 
 Vue.filter('formatDate', function (value, format = '', join = ' ') {

package-lock.json

@@ -2817,6 +2817,11 @@
         "path-key": "2.0.1"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "nth-check": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.1.tgz",

package.json

@@ -31,6 +31,7 @@
     "multer": "^1.3.0",
     "mysql": "^2.13.0",
     "mysql2": "^1.4.2",
+    "nprogress": "^0.2.0",
     "preview-link": "0.0.0",
     "randomcolor": "^0.4.4",
     "sequelize": "^3.30.0",