Show splash screen while loading for first time

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`
 

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: () => ({
+  data() {
+    return {
       // pageInfo: this.getPageInfo(conf.pageInfo),
       showFooter: Defaults.visibleComponents.footer,
-  }),
+      isLoading: true,
+    };
+  },
   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);

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>

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;

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);
+
 }

src/utils/ConfigSchema.json

@@ -89,6 +89,11 @@
         "customCss": {
           "type": "string",
           "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

src/utils/defaults.js

@@ -72,4 +72,5 @@ module.exports = {
     iconPack: 'fontawesome',
   },
   backupEndpoint: 'https://dashy-sync-service.as93.net',
+  splashScreenTime: 1900,
 };