From 6f82189a42481606797d9753893dc5105c3481ae Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@wilde.cloud>
Date: Tue, 14 Feb 2023 15:50:44 +0000
Subject: [PATCH] added animated logo for starting up

---
 package.json                     |  1 +
 src/components/LoadingScreen.vue | 53 +++++++++++++++++++-------------
 yarn.lock                        |  5 +++
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 657c0dc..25e0c84 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@mdi/font": "5.9.55",
     "@vuepic/vue-datepicker": "^3.6.4",
+    "animate.css": "^4.1.1",
     "axios": "^1.2.2",
     "core-js": "^3.8.3",
     "moment": "^2.29.4",
diff --git a/src/components/LoadingScreen.vue b/src/components/LoadingScreen.vue
index bd9e67f..ac3a48a 100644
--- a/src/components/LoadingScreen.vue
+++ b/src/components/LoadingScreen.vue
@@ -1,40 +1,49 @@
 <template>
-  <div :class="{ loader: true, fadeout: !isLoading }">
-    Loading ...
-  </div>
+    <div :class="{ loader: true, fadeout: !isLoading }">
+        <div class="animate__animated animate__rubberBand animate__infinite animate__slow">
+            <v-img style="border-radius:5%" height="128" src="/images/cmc-logo.png" /><br/>
+        </div>
+        <br/>
+        <v-progress-circular
+                color="deep-orange"
+                indeterminate
+                ></v-progress-circular>
+        Starting ...
+    </div>
 </template>
 
 <script>
+import 'animate.css';
 export default {
-  name: "LoadingScreen",
-  props: ["isLoading"]
+    name: "LoadingScreen",
+    props: ["isLoading"]
 };
 </script>
 
 <style>
 .loader {
-  background-color: lightyellow;
-  bottom: 0;
-  color: black;
-  display: block;
-  font-size: 16px;
-  left: 0;
-  overflow: hidden;
-  padding-top: 10vh;
-  position: fixed;
-  right: 0;
-  text-align: center;
-  top: 0;
+    background-color: lightyellow;
+    bottom: 0;
+    color: black;
+    display: block;
+    font-size: 16px;
+    left: 0;
+    overflow: hidden;
+    padding-top: 10vh;
+    position: fixed;
+    right: 0;
+    text-align: center;
+    top: 0;
 }
 
 .fadeout {
-  animation: fadeout 1s forwards;
+    animation: fadeout 1s forwards;
 }
 
 @keyframes fadeout {
-  to {
-    opacity: 0;
-    visibility: hidden;
-  }
+    to {
+        opacity: 0;
+        visibility: hidden;
+    }
 }
 </style>
diff --git a/yarn.lock b/yarn.lock
index 5d20c9a..8ae34d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1925,6 +1925,11 @@ ajv@^8.0.0, ajv@^8.0.1, ajv@^8.8.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-colors@^4.1.1:
   version "4.1.3"
   resolved "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"