update to svelte 5

src/lib/components/LoadMoreComponent.svelte

@@ -1,33 +1,34 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte';
 
-  export let moreAvailable = false;
-  export let isLoading = false;
-  let displayText = '';
-  let title = '';
-  let disabled: boolean;
-
-  $: if (isLoading) {
-    displayText = 'Loading...';
-  } else if (!moreAvailable) {
-    displayText = 'You reached the end';
-  } else {
-    displayText = 'Load More';
+  interface Props {
+    moreAvailable?: boolean;
+    isLoading?: boolean;
+    loadOlderPosts: any;
   }
-  $: disabled = !moreAvailable || isLoading;
-  $: title = moreAvailable ? 'Load More' : 'There be dragons!';
 
-  const dispatch = createEventDispatcher<{
-    loadOlderPosts: string;
-  }>();
+  let { moreAvailable = false, isLoading = false, loadOlderPosts }: Props = $props();
+  let displayText = $derived.by(() => {
+    if (isLoading) {
+      return 'Loading...';
+    } else if (!moreAvailable) {
+      return 'You reached the end';
+    }
+    return 'Load More';
+  });
+  let title = $derived(moreAvailable ? 'Load More' : 'There be dragons!');
+  let disabled: boolean = $derived(!moreAvailable || isLoading);
 
-  function loadOlderPosts() {
-    dispatch('loadOlderPosts');
-  }
+  /*const dispatch = createEventDispatcher<{
+  loadOlderPosts: string;
+}>();
+
+function loadOlderPosts() {
+  dispatch('loadOlderPosts');
+}*/
 </script>
 
-<button on:click={loadOlderPosts} {disabled} {title}>
+<button onclick={() => loadOlderPosts()} {disabled} {title}>
   <div class="loading" class:collapsed={!isLoading}>
     <LoadingSpinnerComponent size="0.5em" thickness="6px" />
   </div>