nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-09-27 20:27:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix infinite scroll.

Browse Source
This commit is contained in:
nyne
2025-05-19 10:37:31 +08:00
parent d8046472be
commit 3557f25268
1 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/resources_view.tsx
View File

@@ -2,7 +2,7 @@ import {PageResponse, Resource} from "../network/models.ts";
import {useCallback, useEffect, useRef, useState} from "react"; import {useCallback, useEffect, useRef, useState} from "react";
import showToast from "./toast.ts"; import showToast from "./toast.ts";
import ResourceCard from "./resource_card.tsx"; import ResourceCard from "./resource_card.tsx";
import {Masonry} from "masonic"; import {Masonry, useInfiniteLoader} from "masonic";
import Loading from "./loading.tsx"; import Loading from "./loading.tsx";
export default function ResourcesView({loader}: {loader: (page: number) => Promise<PageResponse<Resource>>}) { export default function ResourcesView({loader}: {loader: (page: number) => Promise<PageResponse<Resource>>}) {
@@ -30,11 +30,10 @@ export default function ResourcesView({loader}: {loader: (page: number) => Promi
loadPage() loadPage()
}, [loadPage]); }, [loadPage]);
const maybeLoadMore = useInfiniteLoader(loadPage)
return <div className={"px-2 pt-2"}> return <div className={"px-2 pt-2"}>
<Masonry columnWidth={300} items={data} render={(e) => { <Masonry onRender={maybeLoadMore} columnWidth={300} items={data} render={(e) => {
if (e.index === data.length - 1) {
loadPage()
}
return <ResourceCard resource={e.data} key={e.data.id}/> return <ResourceCard resource={e.data} key={e.data.id}/>
} }></Masonry> } }></Masonry>
{ {