Fix #4: Implement "Load More" button

src/lib/components/LoadMoreComponent.svelte

@@ -1,11 +1,40 @@
-<script>
-    import { createEventDispatcher } from 'svelte';
+<script lang="ts">
+  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() {
-        dispatch('loadOlderPosts');
-    }
+  $: displayText = isLoading ? 'Loading...' : 'Load More';
+  $: 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>