Merge pull request #467 from FlowFuse/464-loading-graphic

Add placeholder loading graphic whilst waiting for first ui-config
FlowFuse · Jan 3, 2024 · ddddcd6 · ddddcd6
2 parents 646ac88 + fb0c59a
commit ddddcd6
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 4 deletions.
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -1,6 +1,10 @@
 <template>
     <v-app>
-        <router-view v-if="!status" />
+        <div v-if="loading" class="nrdb-splash-loading">
+            <DashboardLoading />
+            Loading...
+        </div>
+        <router-view v-else-if="!status" />
         <div v-else class="nrdb-placeholder-container">
             <div class="nrdb-placeholder">
                 <img src="./assets/logo.png">
@@ -16,14 +20,23 @@
 import { mapState } from 'vuex'
 import { markRaw } from 'vue' // eslint-disable-line import/order
 
+import DashboardLoading from './components/loading.vue'
 import DebugView from './debug/Debug.vue' // import the Debug View for a Dashboard
 import layouts from './layouts/index.mjs' // import all layouts
 import { importExternalComponent } from './util.mjs'
-import widgetComponents from './widgets/index.mjs' // import all Vue Widget Components
+import widgetComponents from './widgets/index.mjs' // import all Vue Widget Components\
 
 export default {
     name: 'App',
+    components: {
+        DashboardLoading
+    },
     inject: ['$socket'],
+    data () {
+        return {
+            loading: true
+        }
+    },
     computed: {
         ...mapState('ui', ['dashboards', 'pages', 'widgets']),
         status: function () {
@@ -103,6 +116,7 @@ export default {
     },
     created () {
         this.$socket.on('ui-config', (topic, payload) => {
+            this.loading = false
             console.log('ui-config received. topic:', topic, 'payload:', payload)
 
             // Create Debug Endpoints

diff --git a/ui/src/components/loading.vue b/ui/src/components/loading.vue
@@ -0,0 +1,82 @@
+<template>
+    <svg class="nrdb-loading" width="64" height="64" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg" fill="currentFill">
+        <circle cx="12.5" cy="12.5" r="12.5">
+            <animate
+                attributeName="fill-opacity"
+                begin="0s" dur="1s"
+                values="1;.2;1" calcMode="linear"
+                repeatCount="indefinite"
+            />
+        </circle>
+        <circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5">
+            <animate
+                attributeName="fill-opacity"
+                begin="100ms" dur="1s"
+                values="1;.2;1" calcMode="linear"
+                repeatCount="indefinite"
+            />
+        </circle>
+        <circle cx="52.5" cy="12.5" r="12.5">
+            <animate
+                attributeName="fill-opacity"
+                begin="300ms" dur="1s"
+                values="1;.2;1" calcMode="linear"
+                repeatCount="indefinite"
+            />
+        </circle>
+        <circle cx="52.5" cy="52.5" r="12.5">
+            <animate
+                attributeName="fill-opacity"
+                begin="600ms" dur="1s"
+                values="1;.2;1" calcMode="linear"
+                repeatCount="indefinite"
+            />
+        </circle>
+        <circle cx="92.5" cy="12.5" r="12.5">
+            <animate
+                attributeName="fill-opacity"
+                begin="800ms" dur="1s"
+                values="1;.2;1" calcMode="linear"
+                repeatCount="indefinite"
+            />
+        </circle>
+        <circle cx="92.5" cy="52.5" r="12.5">
+            <animate
+                attributeName="fill-opacity"
+                begin="400ms" dur="1s"
+                values="1;.2;1" calcMode="linear"
+                repeatCount="indefinite"
+            />
+        </circle>
+        <circle cx="12.5" cy="92.5" r="12.5">
+            <animate
+                attributeName="fill-opacity"
+                begin="700ms" dur="1s"
+                values="1;.2;1" calcMode="linear"
+                repeatCount="indefinite"
+            />
+        </circle>
+        <circle cx="52.5" cy="92.5" r="12.5">
+            <animate
+                attributeName="fill-opacity"
+                begin="500ms" dur="1s"
+                values="1;.2;1" calcMode="linear"
+                repeatCount="indefinite"
+            />
+        </circle>
+        <circle cx="92.5" cy="92.5" r="12.5">
+            <animate
+                attributeName="fill-opacity"
+                begin="200ms" dur="1s"
+                values="1;.2;1" calcMode="linear"
+                repeatCount="indefinite"
+            />
+        </circle>
+    </svg>
+</template>
+
+<script>
+export default {
+    name: 'LoadingAnimation'
+}
+</script>
diff --git a/ui/src/stylesheets/common.css b/ui/src/stylesheets/common.css
@@ -3,8 +3,8 @@
 */
 
 :root {
-    --nrdb-bg-color: #222;
-    --nrdb-text-color: #fff;
+    --nrdb-bg-color: #eee;
+    --nrdb-text-color: #222;
     --nrdb-font-family: Helvtiva;
     /* header */
     --nrdb-header-bg: red;
@@ -29,6 +29,25 @@ main {
     padding: var(--nrdb-main-padding);
 }
 
+/**
+* Loading Animation
+*/
+.nrdb-splash-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    gap: 12px;
+    font-weight: bold;
+}
+
+.nrdb-loading {
+    fill: #bbb;
+}
+
 /**
 * Placeholder
 */