-
+
-
diff --git a/src/app/space/components/blocks/feed.tsx b/src/app/space/components/blocks/feed.tsx
index eaaf46c7..7af0d6b6 100644
--- a/src/app/space/components/blocks/feed.tsx
+++ b/src/app/space/components/blocks/feed.tsx
@@ -3,47 +3,44 @@ import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
import { NoteSkeleton } from "@app/note/components/skeleton";
import { CancelIcon } from "@shared/icons";
import { useActiveAccount } from "@stores/accounts";
-import { useInfiniteQuery } from "@tanstack/react-query";
import { useVirtualizer } from "@tanstack/react-virtual";
import { getNotesByAuthor } from "@utils/storage";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
+import useSWRInfinite from "swr/infinite";
const ITEM_PER_PAGE = 10;
const TIME = Math.floor(Date.now() / 1000);
+const fetcher = async ([pubkey, offset]) =>
+ getNotesByAuthor(pubkey, TIME, ITEM_PER_PAGE, offset);
+
export function FeedBlock({ params }: { params: any }) {
const removeBlock = useActiveAccount((state: any) => state.removeBlock);
- const {
- status,
- data,
- fetchNextPage,
- hasNextPage,
- isFetching,
- isFetchingNextPage,
- }: any = useInfiniteQuery({
- queryKey: [params.title],
- queryFn: async ({ pageParam = 0 }) => {
- return await getNotesByAuthor(
- params.content,
- TIME,
- ITEM_PER_PAGE,
- pageParam,
- );
- },
- getNextPageParam: (lastPage) => lastPage.nextCursor,
- });
+ const close = () => {
+ removeBlock(params.id);
+ };
+
+ const getKey = (pageIndex, previousPageData) => {
+ if (previousPageData && !previousPageData.data) return null;
+ if (pageIndex === 0) return [params.content, 0];
+ return [params.content, previousPageData.nextCursor];
+ };
+
+ const { data, isLoading, size, setSize } = useSWRInfinite(getKey, fetcher);
+
+ const notes = useMemo(
+ () => (data ? data.flatMap((d) => d.data) : []),
+ [data],
+ );
- const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
const parentRef = useRef();
-
const rowVirtualizer = useVirtualizer({
- count: hasNextPage ? allRows.length + 1 : allRows.length,
+ count: notes.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 400,
overscan: 2,
});
-
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
useEffect(() => {
@@ -53,18 +50,10 @@ export function FeedBlock({ params }: { params: any }) {
return;
}
- if (
- lastItem.index >= allRows.length - 1 &&
- hasNextPage &&
- !isFetchingNextPage
- ) {
- fetchNextPage();
+ if (lastItem.index >= notes.length - 1) {
+ setSize(size + 1);
}
- }, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
-
- const close = () => {
- removeBlock(params.id);
- };
+ }, [notes.length, rowVirtualizer.getVirtualItems()]);
return (
@@ -87,7 +76,7 @@ export function FeedBlock({ params }: { params: any }) {
className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 overflow-y-auto"
style={{ contain: "strict" }}
>
- {status === "loading" ? (
+ {!data || isLoading ? (
@@ -110,7 +99,7 @@ export function FeedBlock({ params }: { params: any }) {
}}
>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
- const note = allRows[virtualRow.index];
+ const note = notes[virtualRow.index];
if (note) {
if (note.kind === 1) {
return (
@@ -138,15 +127,6 @@ export function FeedBlock({ params }: { params: any }) {
)}
-
- {isFetching && !isFetchingNextPage && (
-
- )}
-
);
diff --git a/src/app/space/components/blocks/following.tsx b/src/app/space/components/blocks/following.tsx
index 1b870b07..89a17555 100644
--- a/src/app/space/components/blocks/following.tsx
+++ b/src/app/space/components/blocks/following.tsx
@@ -1,42 +1,37 @@
import { NoteBase } from "@app/note/components/base";
import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
import { NoteSkeleton } from "@app/note/components/skeleton";
-
-import { getNotes } from "@utils/storage";
-
-import { useInfiniteQuery } from "@tanstack/react-query";
import { useVirtualizer } from "@tanstack/react-virtual";
-import { useEffect, useRef } from "react";
+import { getNotes } from "@utils/storage";
+import { useEffect, useMemo, useRef } from "react";
+import useSWRInfinite from "swr/infinite";
const ITEM_PER_PAGE = 10;
const TIME = Math.floor(Date.now() / 1000);
+const fetcher = async ([, offset]) => getNotes(TIME, ITEM_PER_PAGE, offset);
+
export function FollowingBlock() {
- const {
- status,
- data,
- fetchNextPage,
- hasNextPage,
- isFetching,
- isFetchingNextPage,
- }: any = useInfiniteQuery({
- queryKey: ["following"],
- queryFn: async ({ pageParam = 0 }) => {
- return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
- },
- getNextPageParam: (lastPage) => lastPage.nextCursor,
- });
+ const getKey = (pageIndex, previousPageData) => {
+ if (previousPageData && !previousPageData.data) return null;
+ if (pageIndex === 0) return ["following", 0];
+ return ["following", previousPageData.nextCursor];
+ };
+
+ const { data, isLoading, size, setSize } = useSWRInfinite(getKey, fetcher);
+
+ const notes = useMemo(
+ () => (data ? data.flatMap((d) => d.data) : []),
+ [data],
+ );
- const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
const parentRef = useRef();
-
const rowVirtualizer = useVirtualizer({
- count: hasNextPage ? allRows.length + 1 : allRows.length,
+ count: notes.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 400,
overscan: 2,
});
-
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
useEffect(() => {
@@ -46,14 +41,10 @@ export function FollowingBlock() {
return;
}
- if (
- lastItem.index >= allRows.length - 1 &&
- hasNextPage &&
- !isFetchingNextPage
- ) {
- fetchNextPage();
+ if (lastItem.index >= notes.length - 1) {
+ setSize(size + 1);
}
- }, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
+ }, [notes.length, rowVirtualizer.getVirtualItems()]);
return (
@@ -68,7 +59,7 @@ export function FollowingBlock() {
className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 overflow-y-auto"
style={{ contain: "strict" }}
>
- {status === "loading" ? (
+ {!data || isLoading ? (
@@ -91,7 +82,7 @@ export function FollowingBlock() {
}}
>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
- const note = allRows[virtualRow.index];
+ const note = notes[virtualRow.index];
if (note) {
if (note.kind === 1) {
return (
@@ -119,15 +110,6 @@ export function FollowingBlock() {
)}
-
- {isFetching && !isFetchingNextPage && (
-
- )}
-