Dynamic post loading (#2)

Dynamically load the posts so that you can scroll a chronologically sorted timeline infinitely

Reviewed-on: #2
Co-authored-by: ari <ariadna@omg.lol>
Co-committed-by: ari <ariadna@omg.lol>

src/App.svelte

@@ -1,10 +1,31 @@
 <script lang="ts">
   import PostComponent from "./lib/PostComponent.svelte";
   import AccountComponent from "./lib/AccountComponent.svelte";
-  import { fetchAllPosts, Post, getAllMetadataFromPds } from "./lib/pdsfetch";
+  import InfiniteLoading from "svelte-infinite-loading";
+  import { getNextPosts, Post, getAllMetadataFromPds } from "./lib/pdsfetch";
   import { Config } from "../config";
-  const postsPromise = fetchAllPosts();
   const accountsPromise = getAllMetadataFromPds();
+  import { onMount } from "svelte";
+
+  let posts: Post[] = [];
+
+  onMount(() => {
+    // Fetch initial posts
+    getNextPosts().then((initialPosts) => {
+      posts = initialPosts;
+    });
+  });
+  // Infinite loading function
+  const onInfinite = ({ detail: { loaded, complete } } : { detail : { loaded : () => void, complete : () => void}}) => {
+    getNextPosts().then((newPosts) => {
+      if (newPosts.length > 0) {
+        posts = [...posts, ...newPosts];
+        loaded();
+      } else {
+        complete();
+      }
+    });
+  };
 </script>
 
 <main>
@@ -26,17 +47,16 @@
       <p>Error: {error.message}</p>
     {/await}
 
-    {#await postsPromise}
-      <p>Loading...</p>
-    {:then postsData}
-      <div id="Feed">
-        <div id="spacer"></div>
-        {#each postsData as postObject}
-          <PostComponent post={postObject as Post} />
-        {/each}
-        <div id="spacer"></div>
-      </div>
-    {/await}
+    <div id="Feed">
+      <div id="spacer"></div>
+      {#each posts as postObject}
+        <PostComponent post={postObject as Post} />
+      {/each}
+      <InfiniteLoading on:infinite={onInfinite} 
+        distance={0}
+      />
+      <div id="spacer"></div>
+    </div>
   </div>
 </main>