From f6cecaf3bbe29182ecd11af399fe6972632ccfd3 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 11 Jun 2021 17:18:07 +0100
Subject: [PATCH] Show splash screen while loading for first time

---
 docs/configuring.md                           |   1 +
 src/App.vue                                   |  29 ++-
 src/components/PageStrcture/LoadingScreen.vue | 114 +++++++++++
 .../Settings/KeyboardShortcutInfo.vue         |   2 +-
 src/styles/color-palette.scss                 |   3 +
 src/utils/ConfigSchema.json                   | 179 +++++++++---------
 src/utils/defaults.js                         |   1 +
 7 files changed, 235 insertions(+), 94 deletions(-)
 create mode 100644 src/components/PageStrcture/LoadingScreen.vue

diff --git a/docs/configuring.md b/docs/configuring.md
index fbfa0b6b..6e08c584 100644
--- a/docs/configuring.md
+++ b/docs/configuring.md
@@ -49,6 +49,7 @@ All fields are optional, unless otherwise stated.
 **`cssThemes`** | `string[]` | _Optional_ | An array of custom theme names which can be used in the theme switcher dropdown
 **`externalStyleSheet`** | `string`  or `string[]` | _Optional_ | Either a URL to an external stylesheet or an array or URLs, which can be applied as themes within the UI
 **`customCss`** | `string` | _Optional_ | Raw CSS that will be applied to the page. This can also be set from the UI. Please minify it first.
+**`showSplashScreen`** | `boolean` | _Optional_ | Should display a splash screen while the app is loading. Defaults to false, except on first load
 
 #### `section`
 
diff --git a/src/App.vue b/src/App.vue
index 6012579e..2598f68a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
-  <div id="dashy" data-theme="dark">
+  <div id="dashy">
+    <LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash()" />
     <Header :pageInfo="pageInfo" />
     <router-view />
     <Footer v-if="showFooter" :text="getFooterText()" />
@@ -9,7 +10,8 @@
 
 import Header from '@/components/PageStrcture/Header.vue';
 import Footer from '@/components/PageStrcture/Footer.vue';
-import Defaults, { localStorageKeys } from '@/utils/defaults';
+import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
+import Defaults, { localStorageKeys, splashScreenTime } from '@/utils/defaults';
 import conf from '../public/conf.yml';
 
 export default {
@@ -17,11 +19,15 @@ export default {
   components: {
     Header,
     Footer,
+    LoadingScreen,
+  },
+  data() {
+    return {
+      // pageInfo: this.getPageInfo(conf.pageInfo),
+      showFooter: Defaults.visibleComponents.footer,
+      isLoading: true,
+    };
   },
-  data: () => ({
-    // pageInfo: this.getPageInfo(conf.pageInfo),
-    showFooter: Defaults.visibleComponents.footer,
-  }),
   computed: {
     pageInfo() {
       return this.getPageInfo(conf.pageInfo);
@@ -68,8 +74,19 @@ export default {
       style.textContent = usersCss;
       document.head.append(style);
     },
+    shouldShowSplash() {
+      return this.appConfig.showSplashScreen || !localStorage[localStorageKeys.HIDE_WELCOME_BANNER];
+    },
+    hideSplash() {
+      if (this.shouldShowSplash()) {
+        setTimeout(() => { this.isLoading = false; }, splashScreenTime || 2000);
+      } else {
+        this.isLoading = false;
+      }
+    },
   },
   mounted() {
+    this.hideSplash();
     if (this.appConfig.customCss) {
       const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
       this.injectCustomStyles(cleanedCss);
diff --git a/src/components/PageStrcture/LoadingScreen.vue b/src/components/PageStrcture/LoadingScreen.vue
new file mode 100644
index 00000000..d003b56c
--- /dev/null
+++ b/src/components/PageStrcture/LoadingScreen.vue
@@ -0,0 +1,114 @@
+<template>
+ <transition name="slide-fade">
+  <div id="loading" v-if="isLoading" :class="c" @click="c = 'hide'">
+    <h2>Dashy</h2>
+    <div class="inner-container">
+      <p>Loading</p>
+      <span class="dots-cont">
+        <span class="dot dot-1"></span>
+        <span class="dot dot-2"></span>
+        <span class="dot dot-3"></span>
+        <span class="dot dot-4"></span>
+      </span>
+    </div>
+  </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'LoadingScreen',
+  props: {
+    isLoading: { type: Boolean, default: false },
+  },
+  data: () => ({
+    c: '',
+  }),
+};
+</script>
+
+<style scoped lang="scss">
+div#loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 7;
+  background: var(--loading-screen-background);
+  color: var(--loading-screen-color);
+
+  &.hide { display: none; }
+
+  .inner-container {
+    text-align: center;
+  }
+
+  p {
+    font-size: 6vw;
+    display: inline;
+    margin: 0 auto;
+  }
+  h2 {
+    opacity: 0.35;
+    font-size: 16vw;
+    margin: 0;
+  }
+
+  .dots-cont {
+    display: inline;
+    .dot {
+      width: 4px;
+      height: 4px;
+      background: var(--loading-screen-color);
+      display: inline-block;
+      border-radius: 35%;
+      right: 0px;
+      bottom: 0px;
+      margin: 0px 2.5px;
+      position: relative;
+      animation: jump 1s infinite;
+      &.dot-1 {
+        -webkit-animation-delay: 100ms;
+        animation-delay: 100ms;
+      }
+      &.dot-2 {
+        -webkit-animation-delay: 200ms;
+        animation-delay: 200ms;
+      }
+      &.dot-3 {
+        -webkit-animation-delay: 300ms;
+        animation-delay: 300ms;
+      }
+      &.dot-4 {
+        -webkit-animation-delay: 400ms;
+        animation-delay: 400ms;
+      }
+    }
+  }
+
+  @keyframes jump {
+    0% {
+      bottom: 0px;
+    }
+
+    20% {
+      bottom: 5px;
+    }
+
+    40% {
+      bottom: 0px;
+    }
+  }
+}
+
+.slide-fade-leave-active {
+  transition: all .2s cubic-bezier(1, 0.9, 0.7, 0.4);
+}
+.slide-fade-enter, .slide-fade-leave-to  {
+  transform: translateY(-200px);
+  opacity: 0;
+}
+</style>
diff --git a/src/components/Settings/KeyboardShortcutInfo.vue b/src/components/Settings/KeyboardShortcutInfo.vue
index cda24ea5..6659612d 100644
--- a/src/components/Settings/KeyboardShortcutInfo.vue
+++ b/src/components/Settings/KeyboardShortcutInfo.vue
@@ -75,7 +75,7 @@ export default {
   right: 10px;
   margin: 0.5em;
   padding: 0.1em 0.3em;
-  z-index: 10;
+  z-index: 6;
   border-radius: 12px;
   border: 1px solid var(--welcome-popup-background);
   -webkit-box-shadow: 2px 1px 5px #130f23;
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index baa2856e..995a12a8 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -77,4 +77,7 @@
   --toast-color: var(--background);
   --scroll-bar-color: var(--primary);
   --scroll-bar-background: var(--background-darker);
+  --loading-screen-color: var(--primary);
+  --loading-screen-background: var(--background);
+
 }
diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json
index 61ad319b..365083f7 100644
--- a/src/utils/ConfigSchema.json
+++ b/src/utils/ConfigSchema.json
@@ -1,33 +1,33 @@
 {
   "type": "object",
-    "required": [
-      "sections"
-    ],
-      "additionalProperties": false,
-        "properties": {
+  "required": [
+    "sections"
+  ],
+  "additionalProperties": false,
+  "properties": {
     "pageInfo": {
       "type": "object",
-        "properties": {
+      "properties": {
         "title": {
           "type": "string",
-            "description": "Title and heading for the app"
+          "description": "Title and heading for the app"
         },
         "description": {
           "type": "string",
-            "description": "Sub-title, displayed in header"
+          "description": "Sub-title, displayed in header"
         },
         "navLinks": {
           "type": "array",
-            "maxItems": 6,
-              "description": "Quick access links, displayed in header",
-                "items": {
+          "maxItems": 6,
+          "description": "Quick access links, displayed in header",
+          "items": {
             "type": "object",
-              "additionalProperties": false,
-                "required": [
-                  "title",
-                  "path"
-                ],
-                  "properties": {
+            "additionalProperties": false,
+            "required": [
+              "title",
+              "path"
+            ],
+            "properties": {
               "title": {
                 "type": "string"
               },
@@ -44,91 +44,96 @@
       "required": [
         "title"
       ],
-        "additionalProperties": false
+      "additionalProperties": false
     },
     "appConfig": {
       "type": "object",
-        "description": "Application configuration",
-          "properties": {
+      "description": "Application configuration",
+      "properties": {
         "backgroundImg": {
           "type": "string",
-            "description": "A URL to an image asset to be displayed as background"
+          "description": "A URL to an image asset to be displayed as background"
         },
         "theme": {
           "type": "string",
-            "default": "Callisto",
-              "description": "A theme to be applied by default on first load"
+          "default": "Callisto",
+          "description": "A theme to be applied by default on first load"
         },
         "enableFontAwesome": {
           "type": "boolean",
-            "default": true,
-              "description": "Should load font-awesome assets"
+          "default": true,
+          "description": "Should load font-awesome assets"
         },
         "fontAwesomeKey": {
           "type": "string",
-            "pattern": "^[a-z0-9]{10}$",
-              "description": "API key for font-awesome"
+          "pattern": "^[a-z0-9]{10}$",
+          "description": "API key for font-awesome"
         },
         "cssThemes": {
           "type": "array",
-            "description": "Theme names to be added to the dropdown",
-              "items": {
+          "description": "Theme names to be added to the dropdown",
+          "items": {
             "type": "string"
           }
         },
         "externalStyleSheet": {
           "description": "URL or URLs of external stylesheets to add to dropdown/ load",
-            "type": [
-              "string",
-              "array"
-            ],
-              "items": {
+          "type": [
+            "string",
+            "array"
+          ],
+          "items": {
             "type": "string"
           }
         },
         "customCss": {
           "type": "string",
-            "description": "Any custom CSS overides, must be minified"
+          "description": "Any custom CSS overides, must be minified"
+        },
+        "showSplashScreen": {
+          "type": "boolean",
+          "default": false,
+          "description": "Display a loading screen when the app is launched"
         }
       },
       "additionalProperties": false
     },
     "sections": {
       "type": "array",
-        "description": "Array of sections, containing items",
-          "items": {
+      "description": "Array of sections, containing items",
+      "items": {
         "type": "object",
-          "required": [
-            "name",
-            "items"
-          ],
-            "additionalProperties": false,
-              "properties": {
+        "required": [
+          "name",
+          "items"
+        ],
+        "additionalProperties": false,
+        "properties": {
           "name": {
             "type": "string",
-              "description": "Title/ heading for a section"
+            "description": "Title/ heading for a section"
           },
           "icon": {
             "type": "string",
-              "description": "Icon will be displayed next to title"
+            "description": "Icon will be displayed next to title"
           },
           "displayData": {
             "type": "object",
-              "additionalProperties": false,
-                "description": "Optional meta data for customizing a section",
-                  "properties": {
+            "additionalProperties": false,
+            "description": "Optional meta data for customizing a section",
+            "properties": {
               "collapsed": {
                 "type": "boolean",
-                  "default": false,
-                    "description": "If true, section needs to be clicked to open"
+                "default": false,
+                "description": "If true, section needs to be clicked to open"
               },
               "color": {
                 "type": "string",
-                  "description": "Hex code, or HTML color for section fill"
+                "description": "Hex code, or HTML color for section fill"
               },
               "customStyles": {
                 "type": "string",
-                  "description": "CSS overides for section container"
+                "description": "CSS overides for section container"
               },
               "itemSize": {
                 "enum": [
@@ -136,72 +141,72 @@
                   "medium",
                   "large"
                 ],
-                  "default": "medium",
-                    "description": "Size of items within the section"
+                "default": "medium",
+                "description": "Size of items within the section"
               },
               "rows": {
                 "type": "number",
-                  "minimum": 1,
-                    "maximum": 5,
-                      "default": 1,
-                        "description": "The amount of space that the section spans vertically"
+                "minimum": 1,
+                "maximum": 5,
+                "default": 1,
+                "description": "The amount of space that the section spans vertically"
               },
               "cols": {
                 "type": "number",
-                  "minimum": 1,
-                    "maximum": 5,
-                      "default": 1,
-                        "description": "The amount of space that the section spans horizontally"
+                "minimum": 1,
+                "maximum": 5,
+                "default": 1,
+                "description": "The amount of space that the section spans horizontally"
               },
               "layout": {
                 "enum": [
                   "grid",
                   "auto"
                 ],
-                  "default": "auto",
-                    "description": "If set to grid, items have uniform width, and itemCount can be set"
+                "default": "auto",
+                "description": "If set to grid, items have uniform width, and itemCount can be set"
               },
               "itemCountX": {
                 "type": "number",
-                  "minimum": 1,
-                    "maximum": 12,
-                      "description": "Number of items per column"
+                "minimum": 1,
+                "maximum": 12,
+                "description": "Number of items per column"
               },
               "itemCountY": {
                 "type": "number",
-                  "minimum": 1,
-                    "maximum": 12,
-                      "description": "Number of items per row"
+                "minimum": 1,
+                "maximum": 12,
+                "description": "Number of items per row"
               }
             }
           },
           "items": {
             "type": "array",
-              "description": "Array of items to display with a section",
-                "items": {
+            "description": "Array of items to display with a section",
+            "items": {
               "type": "object",
-                "additionalProperties": false,
-                  "required": [
-                    "title"
-                  ],
-                    "properties": {
+              "additionalProperties": false,
+              "required": [
+                "title"
+              ],
+              "properties": {
                 "title": {
                   "type": "string",
-                    "description": "Text shown on the item"
+                  "description": "Text shown on the item"
                 },
                 "description": {
                   "type": "string",
-                    "nullable": true,
-                      "description": "Short description, shown on hover or in a tooltip"
+                  "nullable": true,
+                  "description": "Short description, shown on hover or in a tooltip"
                 },
                 "icon": {
                   "type": "string",
-                    "nullable": true,
-                      "description": "An icon, either as a font-awesome identifier, local or remote URL, or auto-fetched favicon"
+                  "nullable": true,
+                  "description": "An icon, either as a font-awesome identifier, local or remote URL, or auto-fetched favicon"
                 },
                 "url": {
                   "type": "string",
-                    "description": "The destination to navigate to when item is clicked"
+                  "description": "The destination to navigate to when item is clicked"
                 },
                 "target": {
                   "enum": [
@@ -209,16 +214,16 @@
                     "sametab",
                     "iframe"
                   ],
-                    "default": "newtab",
-                      "description": "Opening method, when item is clicked"
+                  "default": "newtab",
+                  "description": "Opening method, when item is clicked"
                 },
                 "color": {
                   "type": "string",
-                    "description": "A custom fill color of the item"
+                  "description": "A custom fill color of the item"
                 },
                 "provider": {
                   "type": "string",
-                    "description": "Provider name, e.g. Microsoft"
+                  "description": "Provider name, e.g. Microsoft"
                 }
               }
             }
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index e0d13b55..b6d28eba 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -72,4 +72,5 @@ module.exports = {
     iconPack: 'fontawesome',
   },
   backupEndpoint: 'https://dashy-sync-service.as93.net',
+  splashScreenTime: 1900,
 };