fix suspense in infinite scrolling (#587)

solidjs-community · Mar 23, 2024 · a832f60 · a832f60
2 parents e024b1b + 7ba7e1d
commit a832f60
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 14 deletions.
diff --git a/.changeset/large-beans-sort.md b/.changeset/large-beans-sort.md
@@ -0,0 +1,5 @@
+---
+"@solid-primitives/pagination": minor
+---
+
+infinite scolling: fix suspense
diff --git a/packages/pagination/dev/index.tsx b/packages/pagination/dev/index.tsx
@@ -14,12 +14,10 @@ async function fetcher(page: number) {
   return elements;
 }
 
-const App: Component = () => {
+const PaginationDemo: Component = () => {
   const [paginationProps, page, setPage] = createPagination({ pages: 100 });
-  const [pages, infiniteScrollLoader, { end }] = createInfiniteScroll(fetcher);
 
   return (
-    <div class="flex min-h-screen w-full">
       <div class="box-border flex w-1/2 flex-col items-center justify-center space-y-4 bg-gray-800 p-24 text-white">
         <div class="wrapper-v">
           <h4>Pagination component</h4>
@@ -32,19 +30,35 @@ const App: Component = () => {
           </button>
         </div>
       </div>
-      <div class="flex max-h-screen w-1/2 flex-col bg-gray-800 text-white">
-        <div class="flex h-[10%] items-center justify-center overflow-scroll">
-          <h1>Infinite Scrolling:</h1>
-        </div>
-        <div class="h-[90%] overflow-scroll">
-          <For each={pages()}>{item => <p>{item}</p>}</For>
-          <Show when={!end()}>
-            <h1 use:infiniteScrollLoader>Loading...</h1>
-          </Show>
-        </div>
+  );
+};
+
+
+const InfiniteScrollDemo = () => {
+  const [pages, infiniteScrollLoader, { end }] = createInfiniteScroll(fetcher);
+  infiniteScrollLoader;
+  return (
+    <div class="flex max-h-screen w-1/2 flex-col bg-gray-800 text-white">
+      <div class="flex h-[10%] items-center justify-center overflow-scroll">
+        <h1>Infinite Scrolling:</h1>
+      </div>
+      <div class="h-[90%] overflow-scroll">
+        <For each={pages()}>{item => <p>{item}</p>}</For>
+        <Show when={!end()}>
+          <h1 use:infiniteScrollLoader>Loading...</h1>
+        </Show>
       </div>
     </div>
   );
+}
+
+const App: Component = () => {
+  return (
+    <div class="flex min-h-screen w-full">
+      <PaginationDemo />
+      <InfiniteScrollDemo />
+    </div>
+  );
 };
 
 export default App;
diff --git a/packages/pagination/src/index.ts b/packages/pagination/src/index.ts
@@ -300,7 +300,7 @@ export function createInfiniteScroll<T>(fetcher: (page: number) => Promise<T[]>)
   const [contents] = createResource(page, fetcher);
 
   createComputed(() => {
-    const content = contents();
+    const content = contents.latest;
     if (!content) return;
     batch(() => {
       if (content.length === 0) setEnd(true);