Fix #4: Implement "Load More" button

src/lib/components/LoadMoreComponent.svelte

@@ -1,11 +1,40 @@
-<script>
+<script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
 
-    const dispatch = createEventDispatcher();
+  export let moreAvailable: boolean = false;
+  export let isLoading: boolean = false;
+  let displayText = '';
+  let title = '';
+  let disabled: boolean;
 
-    function loadOlderPosts() {
+  $: displayText = isLoading ? 'Loading...' : 'Load More';
-        dispatch('loadOlderPosts');
+  $: disabled = !moreAvailable || isLoading;
-    }
+  $: title = moreAvailable ? 'Load More' : 'No more posts available';
+
+  const dispatch = createEventDispatcher();
+
+  function loadOlderPosts() {
+    dispatch('loadOlderPosts');
+  }
 </script>
 
-<button on:click={loadOlderPosts}>Load More</button>
+<button on:click={loadOlderPosts} {disabled} {title}>{displayText}</button>
+
+<style>
+  button {
+    padding: 0.75em;
+    border-radius: 3px;
+    border: none;
+    background-color: var(--color-link);
+    color: white;
+    cursor: grab;
+    transition: all 0.2s ease-in-out;
+  }
+  button:hover:not(:disabled) {
+    background-color: var(--color-link-visited);
+  }
+  button:disabled {
+    cursor: not-allowed;
+    background-color: grey;
+  }
+</style>

src/routes/+page.svelte

@@ -9,6 +9,8 @@ import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
 export let data: PageData;
 
 let interval: NodeJS.Timer | null = null;
+let moreOlderPostsAvailable = true;
+let loadingOlderPosts = false;
 
 onMount(async () => {
   interval = setInterval(async () => {
@@ -42,6 +44,7 @@ onMount(async () => {
 });
 
 async function loadOlderPosts() {
+  loadingOlderPosts = true;
   const params = new URLSearchParams();
   if (data.posts.length > 0) {
     params.set('before', data.posts[data.posts.length - 1].created_at);
@@ -57,9 +60,14 @@ async function loadOlderPosts() {
         return arr.map(mapObj => mapObj.url).indexOf(obj.url) === index;
       });
       data.posts = filteredPosts;
+      moreOlderPostsAvailable = true;
+    } else {
+      moreOlderPostsAvailable = false;
     }
+    loadingOlderPosts = false;
   })
   .catch(e => {
+    loadingOlderPosts = false;
     // TODO: Show error in UI
     console.error('Error loading older posts', e);
   });
@@ -80,7 +88,10 @@ async function loadOlderPosts() {
   {#each data.posts as post (post.url)}
       <div class="post"><PostComponent {post} /></div>
   {/each}
-  <LoadMoreComponent on:loadOlderPosts={loadOlderPosts}/>
+  <LoadMoreComponent
+    on:loadOlderPosts={loadOlderPosts}
+    moreAvailable={moreOlderPostsAvailable}
+    isLoading={loadingOlderPosts}/>
   </div>
   <div></div>
   </div>
@@ -88,6 +99,7 @@ async function loadOlderPosts() {
   .posts {
     display: flex;
     flex-direction: column;
+    align-items: center;
   }
   .post {
     width: 100%;