feat: add enabled option to useInfiniteMemos and PagedMemoList for conditional fetching

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(
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfiniteMemos({
+    {
-    state: props.state || State.NORMAL,
+      state: props.state || State.NORMAL,
-    orderBy: props.orderBy || "display_time desc",
+      orderBy: props.orderBy || "display_time desc",
-    filter: props.filter,
+      filter: props.filter,
-    pageSize: props.pageSize || DEFAULT_LIST_MEMOS_PAGE_SIZE,
+      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]);

web/src/hooks/useMemoQueries.ts

@@ -26,7 +26,7 @@ export function useMemos(request: Partial<ListMemosRequest> = {}) {
   });
 }
 
-export function useInfiniteMemos(request: Partial<ListMemosRequest> = {}) {
+export function useInfiniteMemos(request: Partial<ListMemosRequest> = {}, options?: { enabled?: boolean }) {
   return useInfiniteQuery({
     queryKey: memoKeys.list(request),
     queryFn: async ({ pageParam }) => {
@@ -40,8 +40,9 @@ export function useInfiniteMemos(request: Partial<ListMemosRequest> = {}) {
     },
     initialPageParam: "",
     getNextPageParam: (lastPage) => lastPage.nextPageToken || undefined,
-    staleTime: 1000 * 60, // Consider data fresh for 1 minute
+    staleTime: 1000 * 60,
-    gcTime: 1000 * 60 * 5, // Keep unused data in cache for 5 minutes
+    gcTime: 1000 * 60 * 5,
+    enabled: options?.enabled ?? true,
   });
 }
 

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
       />
     </div>
   );