From 8c6cd8df87a2deab1973ab28da63703c15b64e4f Mon Sep 17 00:00:00 2001
From: Alexis Sellier <self@cloudhead.io>
Date: Tue, 18 May 2021 16:20:05 +0200
Subject: [PATCH] Ease-in loading so it's less flickery

---
 src/Loading.svelte | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/Loading.svelte b/src/Loading.svelte
index 79a7c15eb..11c3e7ddd 100644
--- a/src/Loading.svelte
+++ b/src/Loading.svelte
@@ -58,9 +58,26 @@
       transform: scale(1.0);
     }
   }
+
+  .fade-in {
+    opacity: 0;
+    animation: fadeIn 1.5s;
+    animation-timing-function: ease-in;
+    -webkit-animation: fadeIn 1.5s;
+    -webkit-animation-timing-function: ease-in;
+  }
+
+  @keyframes fadeIn {
+    0% { opacity: 0 }
+    100% { opacity: 1 }
+  }
+  @-webkit-keyframes fadeIn {
+    0% { opacity: 0 }
+    100% { opacity: 1 }
+  }
 </style>
 
-<div class="spinner" class:small class:center>
+<div class="spinner fade-in" class:small class:center>
   <div class="bounce1" style="background-color: var(--color-{color})"></div>
   <div class="bounce2" style="background-color: var(--color-{color})"></div>
   <div class="bounce3" style="background-color: var(--color-{color})"></div>