Animate loading button and new posts arriving

src/lib/components/LoadMoreComponent.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
+  import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte';
 
   export let moreAvailable: boolean = false;
   export let isLoading: boolean = false;
@@ -24,7 +25,12 @@
   }
 </script>
 
-<button on:click={loadOlderPosts} {disabled} {title}>{displayText}</button>
+<button on:click={loadOlderPosts} {disabled} {title}>
+    <div class="loading" class:collapsed={!isLoading}>
+      <LoadingSpinnerComponent size='0.5em' thickness='6px' />
+    </div>
+    <span>{displayText}</span>
+</button>
 
 <style>
   button {
@@ -34,7 +40,11 @@
     background-color: var(--color-button);
     color: var(--color-button-text);
     cursor: grab;
-    transition: all 0.2s ease-in-out;
+    transition: all 0.3s ease-in-out;
+    font-size: large;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
   }
 
   button:hover:not(:disabled) {
@@ -42,7 +52,7 @@
   }
 
   button:hover:not(:disabled):not(:active) {
-    box-shadow: 4px 4px 3px 0 var(--color-button-shadow);
+    box-shadow: 6px 6px 5px 0 var(--color-button-shadow);
     translate: -2px -2px;
   }
 
@@ -52,6 +62,20 @@
   }
 
   button:not(:disabled) {
-    box-shadow: 2px 2px 1px 0 var(--color-button-shadow);
+    box-shadow: 4px 4px 2px 0 var(--color-button-shadow);
+  }
+
+  .loading {
+    margin-right: 3px;
+    display: flex;
+    overflow: hidden;
+    max-width: 100%;
+    transition: all 0.3s;
+  }
+
+  /* Cannot be removed, so that it animates its width change */
+  .collapsed {
+    max-width: 0;
+    margin-right: 0;
   }
 </style>

src/lib/components/LoadingSpinnerComponent.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export let size: string = '64px';
+  export let thickness: string = '6px';
+</script>
+
+<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}"></div>
+<style>
+  .lds-dual-ring {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+  }
+  .lds-dual-ring:after {
+    content: " ";
+    display: block;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    border: var(--thickness) solid #fff;
+    border-color: #fff transparent #fff transparent;
+    animation: lds-dual-ring 1.2s linear infinite;
+  }
+  @keyframes lds-dual-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(36deg);
+    }
+    75% {
+      transform: rotate(234deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+</style>

src/routes/+page.svelte

@@ -5,20 +5,52 @@ import type { Post } from '$lib/mastodon/response';
 import { PUBLIC_REFRESH_INTERVAL, PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME } from '$env/static/public';
 import PostComponent from '$lib/components/PostComponent.svelte';
 import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
+import { fly, type FlyParams } from 'svelte/transition';
+import { cubicInOut } from 'svelte/easing';
+
 
 export let data: PageData;
 
-const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
-let interval: NodeJS.Timer | null = null;
-let moreOlderPostsAvailable = true;
-let loadingOlderPosts = false;
-
 interface FetchOptions {
   since?: string,
   before?: string,
   count?: number
 }
 
+interface EdgeFlyParams extends FlyParams {
+  created_at: string
+}
+
+const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL) * 10;
+let interval: NodeJS.Timer | null = null;
+let moreOlderPostsAvailable = true;
+let loadingOlderPosts = false;
+
+// Needed, so that edgeFly() can do its thing:
+// To determine whether a newly loaded post is older than the existing ones, is required to know what the oldest
+// post was, before the fetch happened.
+let oldestBeforeLastFetch: number | null = null;
+
+/**
+ * Animate either from the top, or the bottom of the window, depending if the post is
+ * newer than the existing ones or older.
+ */
+function edgeFly(node: Element, opts: EdgeFlyParams) {
+  const createdAt =  new Date(opts.created_at).getTime();
+  const diffNewest = Math.abs(new Date(data.posts[0].created_at).getTime() - createdAt);
+  const oldest = oldestBeforeLastFetch !== null
+    ? oldestBeforeLastFetch
+    : new Date(data.posts[data.posts.length - 1].created_at).getTime();
+  const diffOldest = Math.abs(oldest - createdAt);
+  const fromTop = diffNewest <= diffOldest;
+
+  const rect = node.getBoundingClientRect();
+  const paramY = +`${opts.y}`;
+  let offset = isNaN(paramY) ? 0 : paramY + rect.height;
+  opts.y = fromTop ? -offset : window.innerHeight + offset;
+  return fly(node, opts);
+}
+
 async function fetchPosts(options: FetchOptions): Promise<Post[]> {
   const params = new URLSearchParams();
   if (options?.since !== undefined) {
@@ -60,6 +92,9 @@ function refresh() {
 }
 
 onMount(async () => {
+  if (data.posts.length > 0) {
+    oldestBeforeLastFetch = new Date(data.posts[data.posts.length - 1].created_at).getTime();
+  }
   interval = setInterval(refresh, refreshInterval);
 
   // - If the page is hidden, slow down refresh rate
@@ -84,6 +119,7 @@ function loadOlderPosts() {
   const filter: FetchOptions = { count: 20 };
   if (data.posts.length > 0) {
     filter.before = data.posts[data.posts.length - 1].created_at;
+    oldestBeforeLastFetch = new Date(filter.before).getTime();
   }
 
 
@@ -119,7 +155,12 @@ function loadOlderPosts() {
     Sorry, no posts recommending music aave been found yet
   {/if}
   {#each data.posts as post (post.url)}
-      <div class="post"><PostComponent {post} /></div>
+      <div
+        class="post"
+        transition:edgeFly="{{ y: 10, created_at: post.created_at, duration: 300, easing: cubicInOut }}"
+      >
+        <PostComponent {post} />
+      </div>
   {/each}
   <LoadMoreComponent
     on:loadOlderPosts={loadOlderPosts}
@@ -148,5 +189,6 @@ function loadOlderPosts() {
 
   h2 {
     text-align: center;
+    z-index: 100;
   }
 </style>