#Pagination Results

2 messages · Page 1 of 1 (latest)

stoic hingeBOT
#

Hi @ember lion. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

You can wrap usePaginatedQuery in a custom hook that “stabilizes” its result: keep showing the last loaded page(s) while the next page is loading, instead of swapping to an empty/loading state.

Convex shows this pattern as useStablePaginatedQuery, built on top of usePaginatedQuery and useRef so that results only update once loading is finished.[Help my app…]

// hooks/useStablePaginatedQuery.ts
import { useRef } from "react";
import { usePaginatedQuery } from "convex/react";

export const useStablePaginatedQuery = ((name, ...args) => {
  const result = usePaginatedQuery(name as any, ...(args as any));
  const stored = useRef(result);

  // While we're actively loading more, keep returning the old results
  if (result.status !== "LoadingMore") {
    stored.current = result;
  }

  return stored.current;
}) as typeof usePaginatedQuery;

Then use it instead of usePaginatedQuery:

const { results, status, loadMore } = useStablePaginatedQuery(
  api.messages.list,
  {},
  { initialNumItems: 10 },
);

This way, when you call loadMore, status changes to "LoadingMore" but the hook keeps returning the previous results until the new page is done loading, so the old results stay visible while the next content loads.[Help my app…]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: