diff --git a/web/src/components/PagedMemoList/PagedMemoList.tsx b/web/src/components/PagedMemoList/PagedMemoList.tsx index 20b46215e..518635094 100644 --- a/web/src/components/PagedMemoList/PagedMemoList.tsx +++ b/web/src/components/PagedMemoList/PagedMemoList.tsx @@ -27,6 +27,7 @@ interface Props { filter?: string; pageSize?: number; showCreator?: boolean; + enabled?: boolean; } function useAutoFetchWhenNotScrollable({ @@ -88,13 +89,15 @@ const PagedMemoList = (props: Props) => { // Show memo editor only on the root route const showMemoEditor = Boolean(matchPath(Routes.ROOT, window.location.pathname)); - // Use React Query's infinite query for pagination - const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfiniteMemos({ - state: props.state || State.NORMAL, - orderBy: props.orderBy || "display_time desc", - filter: props.filter, - pageSize: props.pageSize || DEFAULT_LIST_MEMOS_PAGE_SIZE, - }); + const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfiniteMemos( + { + state: props.state || State.NORMAL, + orderBy: props.orderBy || "display_time desc", + filter: props.filter, + pageSize: props.pageSize || DEFAULT_LIST_MEMOS_PAGE_SIZE, + }, + { enabled: props.enabled ?? true }, + ); // Flatten pages into a single array of memos const memos = useMemo(() => data?.pages.flatMap((page) => page.memos) || [], [data]); diff --git a/web/src/hooks/useMemoQueries.ts b/web/src/hooks/useMemoQueries.ts index 6cb107e5a..e2dbd6ff1 100644 --- a/web/src/hooks/useMemoQueries.ts +++ b/web/src/hooks/useMemoQueries.ts @@ -26,7 +26,7 @@ export function useMemos(request: Partial = {}) { }); } -export function useInfiniteMemos(request: Partial = {}) { +export function useInfiniteMemos(request: Partial = {}, options?: { enabled?: boolean }) { return useInfiniteQuery({ queryKey: memoKeys.list(request), queryFn: async ({ pageParam }) => { @@ -40,8 +40,9 @@ export function useInfiniteMemos(request: Partial = {}) { }, initialPageParam: "", getNextPageParam: (lastPage) => lastPage.nextPageToken || undefined, - staleTime: 1000 * 60, // Consider data fresh for 1 minute - gcTime: 1000 * 60 * 5, // Keep unused data in cache for 5 minutes + staleTime: 1000 * 60, + gcTime: 1000 * 60 * 5, + enabled: options?.enabled ?? true, }); } diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index 6f432fe78..93cc389ba 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -3,20 +3,20 @@ import MemoView from "@/components/MemoView"; import PagedMemoList from "@/components/PagedMemoList"; import { useMemoFilters, useMemoSorting } from "@/hooks"; import useCurrentUser from "@/hooks/useCurrentUser"; +import { useInstance } from "@/contexts/InstanceContext"; import { State } from "@/types/proto/api/v1/common_pb"; import { Memo } from "@/types/proto/api/v1/memo_service_pb"; const Home = () => { const user = useCurrentUser(); + const { isInitialized } = useInstance(); - // Build filter using unified hook const memoFilter = useMemoFilters({ creatorName: user?.name, includeShortcuts: true, includePinned: true, }); - // Get sorting logic using unified hook const { listSort, orderBy } = useMemoSorting({ pinnedFirst: true, state: State.NORMAL, @@ -31,6 +31,7 @@ const Home = () => { listSort={listSort} orderBy={orderBy} filter={memoFilter} + enabled={isInitialized && !!user} // Wait for contexts to stabilize before fetching /> );