added animated logo for starting up

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",

src/components/LoadingScreen.vue

@@ -1,10 +1,19 @@
 <template>
     <div :class="{ loader: true, fadeout: !isLoading }">
-    Loading ...
+        <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"]

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"