Switch to svelte-infinite-loading

Xyphyn · Jan 14, 2024 · ecec0d2 · ecec0d2
1 parent 4505fe4
commit ecec0d2
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "@dicebear/initials": "^6.0.4",
     "markdown-it": "^13.0.1",
     "mono-svelte": "^1.4.5",
-    "svelte-infinite-scroll": "^2.0.1"
+    "svelte-infinite-loading": "^1.3.8"
   },
   "type": "module"
 }
diff --git a/src/lib/components/lemmy/post/PostFeed.svelte b/src/lib/components/lemmy/post/PostFeed.svelte
@@ -7,8 +7,8 @@
   import { ArchiveBox, Icon, Minus, Plus } from "svelte-hero-icons";
   import { expoOut } from "svelte/easing";
   import { fly, slide } from "svelte/transition";
-  import InfiniteScroll from "svelte-infinite-scroll";
   import { loadPosts, loadedPosts } from "$lib/lemmy.ts";
+  import InfiniteLoading from "svelte-infinite-loading";
   import { page } from "$app/stores";
 
   type PostViewWithCrossposts = PostView & {
@@ -163,17 +163,21 @@
       {/if}
     {/each}
   {/if}
-  <InfiniteScroll
-    window={true}
-    threshold={100}
-    on:loadMore={async () => {
-      let newUrl = $page.url;
-      newUrl.searchParams.set("cursor", cursor?.next || "");
+</ul>
+<InfiniteLoading
+  on:infinite={async ({ detail: { loaded, complete } }) => {
+    let newUrl = $page.url;
+    newUrl.searchParams.set("cursor", cursor?.next || "");
 
-      let newPosts = await loadPosts(newUrl, fetch);
+    let newPosts = await loadPosts(newUrl, fetch);
+    if (newPosts.posts.posts.length == 0) {
+      loaded();
+      complete();
+    } else {
       $loadedPosts = [...$loadedPosts, ...newPosts.posts.posts];
-
       cursor = newPosts.cursor;
-    }}
-  />
-</ul>
+      loaded();
+    }
+  }}
+  spinner="wavedots"
+/>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -82,22 +82,4 @@
     initialPosts={data.posts.posts}
     cursor={{ next: data.cursor.next, back: data.cursor.back }}
   />
-  <div class="mt-auto">
-    <Pageination
-      page={data.page}
-      cursor={{ next: data.cursor.next, back: data.cursor.back }}
-      on:change={(p) => searchParam($page.url, "page", p.detail.toString())}
-      on:cursor={(c) => {
-        searchParam($page.url, "cursor", c.detail);
-      }}
-    >
-      <span class="flex flex-row items-center gap-1">
-        <Icon src={ChartBar} size="16" mini />
-        <span class="font-medium text-black dark:text-white">
-          {$site?.site_view.counts.users_active_day}
-        </span>
-        <span class="font-normal">Active users</span>
-      </span>
-    </Pageination>
-  </div>
 </div>