smooth animations for homeservers

src/page/Explore/Explore.svelte

@@ -8,10 +8,27 @@
     let list = [];
     let loaded = false;
 
+    let loaded_fade_anim = false;
+    let list_fade_anim = false;
+
     // load servers
     invoke('list_servers').then((data: any) => {
-        list = data;
+
-        loaded = true;
+        loaded_fade_anim = true;
+
+        // wait for animation to end
+
+        setTimeout(() => {
+
+            loaded_fade_anim = false;
+            loaded = true;
+            list = data;
+            list_fade_anim = true;
+
+            setTimeout(() => {
+                list_fade_anim = false;
+            }, 1490)
+        }, 1490);
     })
 
 </script>
@@ -29,14 +46,14 @@
     </p>
     <div class={style.list}>
         {#if !loaded}
-            <p>
+            <p class={loaded_fade_anim ? style.fade_out : ''}>
                 Loading...<br/>
                 <Jumper color='#e1e1e1' duration='3s' />
             </p>
         {/if}
 
         {#if loaded}
-            <table style='margin:0 auto;min-width:100%'>
+            <table style='margin:0 auto;min-width:100%' class={list_fade_anim ? style.fade_in : ''}>
                 <tbody>
                     <tr>
                         <td class={style.server}>

src/page/Explore/style.module.scss

@@ -3,6 +3,26 @@
         font-size: 20pt;
         font-weight: 400;
     }
+
+    @keyframes fadeout {
+        0% {
+            opacity: 1;
+            position: relative;
+            top: 0;
+        }
+        to {
+            opacity: 0;
+            position: relative;
+            top: 12px;
+        }
+    }
+
+    .fade_out {
+        animation: fadeout 1.5s ease;
+    }
+    .fade_in {
+        animation: fadeout 1.5s ease reverse;
+    }
     .list {
         margin-top: 60px;
         text-align: center;