✨ Added 'Loding indicator'

assets/css/styles.scss

@@ -78,10 +78,7 @@ nav {
 }
 
 body.sticky-footer footer {
-  position: fixed;
+  opacity: .25;
-  right: 0;
-  bottom: 0;
-  left: 0;
 }
 
 .logo {

layouts/error.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="page page-error">
-    <h1>{{ error.statusCode }}</h1>
+    <img src="~static/icons/error.svg" alt="Error" class="error_banner">
-    <h2>{{ error.message }}</h2>
+    <h2>{{ error.statusCode }}</h2>
-    <br>
+    <h3>{{ error.message }}</h3>
     <p><nuxt-link to="/"><button>Go Home</button></nuxt-link></p>
     <p><a href="" @click.prevent="reloadApplication">Reload</a></p>
   </div>
@@ -11,14 +11,16 @@
 <style lang="scss">
   // Center the error page in the viewport.
   .page-error {
-    position: absolute;
+    display: flex;
-    top: 50%;
+    align-items: center;
-    left: 50%;
+    justify-content: center;
-    transform: translate(-50%, -50%);
+    flex-direction: column;
-    width: 100%;
-
     text-align: center;
   }
+
+  .error_banner {
+    width: 256px;
+  }
 </style>
 
 <script>

nuxt.config.js

@@ -187,6 +187,14 @@ export default {
   loading: {
     color: 'var(--ac-color)'
   },
+  /*
+   ** Customize the loading indicator
+   */
+  loadingIndicator: {
+    name: 'pulse',
+    color: 'var(--ac-color)',
+    background: 'var(--bg-color)'
+  },
   /*
    ** Global CSS
    */