From fca08479e810b71591adc72af914279412a81610 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Sat, 23 Dec 2023 12:05:46 +0100
Subject: [PATCH] Add startup animation

---
 frontend/index.html             |  8 ------
 frontend/src/app.svelte         |  9 ++++--
 frontend/src/main.js            |  2 --
 frontend/src/styles/loading.css | 50 ---------------------------------
 4 files changed, 6 insertions(+), 63 deletions(-)
 delete mode 100644 frontend/src/styles/loading.css
diff --git a/frontend/index.html b/frontend/index.html
index 5deb4fb..afaa631 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,14 +7,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <div id="app-loading">
-      <div class="ring">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
-    </div>
     <div id="dialogoutlets"></div>
     <script src="./src/main.js" type="module"></script>
   </body>
diff --git a/frontend/src/app.svelte b/frontend/src/app.svelte
index 07ae7f1..d81465c 100644
--- a/frontend/src/app.svelte
+++ b/frontend/src/app.svelte
@@ -1,12 +1,15 @@
 <script>
+  import { tick } from 'svelte';
+  import { fly } from 'svelte/transition';
+
   import BlankState from '$components/blankstate.svelte';
+  import Connection from '$organisms/connection/index.svelte';
   import ContextMenu from '$components/contextmenu.svelte';
+
   import contextMenu from '$lib/stores/contextmenu.js';
   import hostTree from '$lib/stores/hosttree.js';
   import applicationInited from '$lib/stores/inited.js';
   import windowTitle from '$lib/stores/windowtitle.js';
-  import Connection from '$organisms/connection/index.svelte';
-  import { tick } from 'svelte';
 
   let showWelcomeScreen = undefined;
 
@@ -31,7 +34,7 @@
   <div class="titlebar">{$windowTitle}</div>
 
   {#if $applicationInited && (showWelcomeScreen !== undefined)}
-    <main class:empty={showWelcomeScreen}>
+    <main class:empty={showWelcomeScreen} in:fly={{ y: 10 }}>
       {#if showWelcomeScreen}
         <BlankState label="Welcome to Rolens!" image="/logo.png" pale={false} big={true}>
           <button class="button" on:click={createFirstHost}>Add your first host</button>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index d3ec76a..8fdcceb 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,4 +1,3 @@
-import './styles/loading.css';
 import './styles/reset.css';
 import './styles/style.css';
 
@@ -9,7 +8,6 @@ window.addEventListener('unhandledrejection', event => {
   LogError('Unhandled JS rejection: ' + event.reason);
 });
 
-// @ts-ignore Argument IS correct.
 const app = new App({ target: document.getElementById('app') });
 
 export default app;
diff --git a/frontend/src/styles/loading.css b/frontend/src/styles/loading.css
deleted file mode 100644
index 20c5345..0000000
--- a/frontend/src/styles/loading.css
+++ /dev/null
@@ -1,50 +0,0 @@
-#app-loading {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  display: flex;
-}
-
-/* Source of the following CSS: https://loading.io/css/ (modified) */
-
-#app-loading .ring {
-  display: inline-block;
-  position: relative;
-  width: 136px;
-  height: 136px;
-  margin: auto;
-}
-
-#app-loading .ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 120px;
-  height: 120px;
-  margin: 8px;
-  border: 8px solid;
-  border-radius: 50%;
-  animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #f1dac8 transparent transparent transparent;
-}
-
-#app-loading .ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-#app-loading .ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-#app-loading .ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-
-@keyframes loading-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
