Fix #4: Implement "Load More" button

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%;