Search and pagination

From: the multi-vendor e-commerce platform (storefront search and order history). The resort website's admin dashboard tables use the same pagination setup.

Debounced searchCopy Anchor Link

Typing "sneakers" without any care sends eight requests, one per letter. Only the last answer matters. Two fixes, together:

const [query, setQuery] = useState('');
const [debouncedQuery] = useDebounce(query, 600);
const { data: suggestions, isFetching } = useSearch(debouncedQuery);

export function useSearch(query: string) {
  const normalizedQuery = query.trim();

  return useQuery({
    queryKey: queryKeys.product.suggestions(normalizedQuery),
    queryFn: () => getProductSearchSuggestions(normalizedQuery),
    enabled: normalizedQuery.length > 0, 
    staleTime: 1000 * 60 * 5, 
  });
}

Page numbers that don't flashCopy Anchor Link

Each page is its own query. Without help, clicking "2" creates a key with no data, isLoading turns true, and the skeleton replaces the table.

export function useOrderHistoryList(page: number) {
  return useQuery({
    queryKey: queryKeys.orderHistory.list(page),
    queryFn: () => getOrderHistory(page, PAGE_SIZE),
    placeholderData: keepPreviousData, 
    staleTime: 1000 * 60 * 5,
  });
}

isLoading vs isFetchingCopy Anchor Link

const [page, setPage] = useState(1);
const { data, isLoading, isError, isFetching } = useOrderHistoryList(page);

if (isLoading) return <OrderHistoryTableSkeleton />;
if (isError || !data) return <OrderHistoryError />;

return (
  <div className={isFetching ? 'opacity-70 transition-opacity' : ''}>
    <DataTable columns={columns} data={data.orders} />
    <Pagination page={data.page} total={data.total} onPageChange={setPage} />
  </div>
);