feat(vue-app): allow customizing loading indicator (#5844)

packages/config/src/config/build.js

@@ -3,7 +3,11 @@ import env from 'std-env'
 export default () => ({
   quiet: Boolean(env.ci || env.test),
   analyze: false,
-  indicator: true,
+  indicator: {
+    position: 'bottom-right',
+    backgroundColor: '#2E495E',
+    color: '#00C48D'
+  },
   profile: process.argv.includes('--profile'),
   extractCSS: false,
   crossorigin: undefined,

packages/config/test/__snapshots__/options.test.js.snap

@@ -55,7 +55,11 @@ Object {
         "useShortDoctype": true,
       },
     },
-    "indicator": true,
+    "indicator": Object {
+      "backgroundColor": "#2E495E",
+      "color": "#00C48D",
+      "position": "bottom-right",
+    },
     "loaders": Object {
       "css": Object {
         "sourceMap": false,

packages/config/test/config/__snapshots__/index.test.js.snap

@@ -42,7 +42,11 @@ Object {
         "useShortDoctype": true,
       },
     },
-    "indicator": true,
+    "indicator": Object {
+      "backgroundColor": "#2E495E",
+      "color": "#00C48D",
+      "position": "bottom-right",
+    },
     "loaders": Object {
       "css": Object {},
       "cssModules": Object {
@@ -378,7 +382,11 @@ Object {
         "useShortDoctype": true,
       },
     },
-    "indicator": true,
+    "indicator": Object {
+      "backgroundColor": "#2E495E",
+      "color": "#00C48D",
+      "position": "bottom-right",
+    },
     "loaders": Object {
       "css": Object {},
       "cssModules": Object {

packages/vue-app/template/components/nuxt-build-indicator.vue

@@ -1,6 +1,6 @@
 <template>
   <transition appear>
-    <div class="nuxt__build_indicator" v-if="building">
+    <div class="nuxt__build_indicator" :style="indicatorStyle" v-if="building">
       <svg viewBox="0 0 96 72" version="1" xmlns="http://www.w3.org/2000/svg">
         <g fill="none" fill-rule="evenodd">
           <path d="M6 66h23l1-3 21-37L40 6 6 66zM79 66h11L62 17l-5 9 22 37v3zM54 31L35 66h38z"/>
@@ -40,6 +40,16 @@ export default {
       const _path = '<%= router.base %>_loading/ws'
       const _protocol = location.protocol === 'https:' ? 'wss' : 'ws'
       return `${_protocol}://${location.hostname}:${location.port}${_path}`
+    },
+    options: () => (<%= JSON.stringify(buildIndicator) %>),
+    indicatorStyle() {
+      const [ d1, d2 ] = this.options.position.split('-')
+      return {
+        [d1]: '20px',
+        [d2]: '20px',
+        'background-color': this.options.backgroundColor,
+        color: this.options.color,
+      }
     }
   },
   watch: {
@@ -128,13 +138,9 @@ export default {
   box-sizing: border-box;
   position: absolute;
   font-family: monospace;
-  bottom: 20px;
-  right: 20px;
-  background-color: #2E495E;
   padding: 5px 10px;
   border-radius: 5px;
   box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
-  color: #00C48D;
   width: 84px;
   z-index: 2147483647;
 }