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,9 +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) {
@@ -56,4 +64,18 @@
   button:not(:disabled) {
     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>