Implements CircleSpinner while dashboard loads.

public/js/app.js

@@ -2463,6 +2463,7 @@ __webpack_require__.r(__webpack_exports__);
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/CircleSpinner.vue */ "./resources/js/components/CircleSpinner.vue");
 //
 //
 //
@@ -2486,10 +2487,18 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+
 /* harmony default export */ __webpack_exports__["default"] = ({
+  components: {
+    CircleSpinner: _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_0__["default"]
+  },
   data: function data() {
     return {
-      workOrders: []
+      workOrders: [],
+      isLoading: true
     };
   },
   mounted: function mounted() {
@@ -2501,6 +2510,7 @@ __webpack_require__.r(__webpack_exports__);
     axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
     axios.get('api/users/' + user + '/workorders').then(function (response) {
       _this.workOrders = response.data;
+      _this.isLoading = false;
     })["catch"](function (error) {
       console.log(error);
     });
@@ -10331,7 +10341,7 @@ exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loa
 
 
 // module
-exports.push([module.i, "\n.loader[data-v-9a543b64],\n.loader[data-v-9a543b64]:after {\n  border-radius: 50%;\n  width: 10em;\n  height: 10em;\n}\n.loader[data-v-9a543b64] {\n  margin: 0px auto;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 1.1em solid rgba(255, 255, 255, 0.2);\n  border-right: 1.1em solid rgba(255, 255, 255, 0.2);\n  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);\n  transform: translateZ(0);\n  -webkit-animation: load8-data-v-9a543b64 1.1s infinite linear;\n  animation: load8-data-v-9a543b64 1.1s infinite linear;\n}\n@-webkit-keyframes load8-data-v-9a543b64 {\n0% {\n    transform: rotate(0deg);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n@keyframes load8-data-v-9a543b64 {\n0% {\n    transform: rotate(0deg);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n", ""]);
+exports.push([module.i, "\n.loader[data-v-9a543b64],\n.loader[data-v-9a543b64]:after {\n  border-radius: 50%;\n  width: 10em;\n  height: 10em;\n}\n.loader[data-v-9a543b64] {\n  margin: 0px auto;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 1.1em solid rgba(255, 255, 255, 0.2);\n  border-right: 1.1em solid rgba(255, 255, 255, 0.2);\n  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);\n  transform: translateZ(0);\n  -webkit-animation: load8-data-v-9a543b64 1.1s infinite linear;\n  animation: load8-data-v-9a543b64 1.1s infinite linear;\n  overflow: hidden;\n}\n@-webkit-keyframes load8-data-v-9a543b64 {\n0% {\n    transform: rotate(0deg);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n@keyframes load8-data-v-9a543b64 {\n0% {\n    transform: rotate(0deg);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n", ""]);
 
 // exports
 
@@ -50780,55 +50790,66 @@ var render = function() {
   var _c = _vm._self._c || _h
   return _c("div", { staticClass: "container" }, [
     _c("div", { staticClass: "row justify-content-center" }, [
-      _c(
-        "div",
-        { staticClass: "col-md-12" },
-        _vm._l(_vm.workOrders, function(workOrder, index) {
-          return _c("div", { key: workOrder.woid, staticClass: "col-md-4" }, [
-            _c("div", { staticClass: "card" }, [
-              _c(
+      !_vm.isLoading
+        ? _c(
+            "div",
+            { staticClass: "col-md-12" },
+            _vm._l(_vm.workOrders, function(workOrder, index) {
+              return _c(
                 "div",
-                { staticClass: "card-header" },
+                { key: workOrder.woid, staticClass: "col-md-4" },
                 [
-                  _c(
-                    "router-link",
-                    {
-                      staticClass: "h4 card-title",
-                      attrs: {
-                        to: {
-                          name: "workorders",
-                          params: { id: workOrder.woid }
-                        }
-                      }
-                    },
-                    [_vm._v(_vm._s(workOrder.woid))]
-                  )
-                ],
-                1
-              ),
-              _vm._v(" "),
-              _c("div", { staticClass: "card-body card-body-dark" }, [
-                _c("div", [
-                  _vm._v(
-                    "\n                            " +
-                      _vm._s(workOrder.probdesc) +
-                      "\n                        "
-                  )
-                ]),
-                _vm._v(" "),
-                _c("div", [
-                  _vm._v(
-                    "\n                            " +
-                      _vm._s(workOrder.suggested) +
-                      "\n                        "
-                  )
-                ])
-              ])
-            ])
-          ])
-        }),
-        0
-      )
+                  _c("div", { staticClass: "card" }, [
+                    _c(
+                      "div",
+                      { staticClass: "card-header" },
+                      [
+                        _c(
+                          "router-link",
+                          {
+                            staticClass: "h4 card-title",
+                            attrs: {
+                              to: {
+                                name: "workorders",
+                                params: { id: workOrder.woid }
+                              }
+                            }
+                          },
+                          [_vm._v(_vm._s(workOrder.woid))]
+                        )
+                      ],
+                      1
+                    ),
+                    _vm._v(" "),
+                    _c("div", { staticClass: "card-body card-body-dark" }, [
+                      _c("div", [
+                        _vm._v(
+                          "\n                            " +
+                            _vm._s(workOrder.probdesc) +
+                            "\n                        "
+                        )
+                      ]),
+                      _vm._v(" "),
+                      _c("div", [
+                        _vm._v(
+                          "\n                            " +
+                            _vm._s(workOrder.suggested) +
+                            "\n                        "
+                        )
+                      ])
+                    ])
+                  ])
+                ]
+              )
+            }),
+            0
+          )
+        : _c(
+            "div",
+            { staticClass: "col-md-12" },
+            [_c("circle-spinner", { attrs: { color: "#663399" } })],
+            1
+          )
     ])
   ])
 }

resources/js/components/CircleSpinner.vue

@@ -38,6 +38,7 @@
   transform: translateZ(0);
   -webkit-animation: load8 1.1s infinite linear;
   animation: load8 1.1s infinite linear;
+  overflow: hidden;
 }
 @-webkit-keyframes load8 {
   0% {

resources/js/views/Dashboard.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <div class="row justify-content-center">
-            <div class="col-md-12">
+            <div v-if="!isLoading" class="col-md-12">
                 <div class="col-md-4" v-for="(workOrder, index) in workOrders" :key="workOrder.woid">
                     <div class="card">
                         <div class="card-header">
@@ -18,14 +18,22 @@
                     </div>
                 </div>
             </div>
+            <div v-else class="col-md-12">
+                <circle-spinner color="#663399"></circle-spinner>
+            </div>
         </div>
     </div>
 </template>
-<script>
+<script>    
+import CircleSpinner from '../components/CircleSpinner.vue'
 export default {
+    components: {
+        CircleSpinner
+    },
     data () {
         return {
-            workOrders: []
+            workOrders: [],
+            isLoading: true,
         }
     },
     mounted () {
@@ -37,6 +45,7 @@ export default {
 
         axios.get('api/users/'+user+'/workorders').then(response => {
             this.workOrders = response.data
+            this.isLoading = false
         }).catch(error => {
             console.log(error)
         })