pagination and TanStack Start

import { convexQuery } from "@convex-dev/react-query";
import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { api } from "../../convex/_generated/api";
import { usePaginatedQuery } from "convex/react";

export const Route = createFileRoute("/")({
  component: Home,
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(
      convexQuery(api.fonts.listFontsPaginated, {
        paginationOpts: {
          cursor: null,
          numItems: 12,
        },
      }),
    );
  },
});

function Home() {
  const {
    results: fontsPaginated,
    status,
    loadMore,
  } = usePaginatedQuery(
    api.fonts.listFontsPaginated,
    {},
    { initialNumItems: 12 },
  );

  const { data: firstPageFonts } = useSuspenseQuery(
    convexQuery(api.fonts.listFontsPaginated, {
      paginationOpts: {
        cursor: null,
        numItems: 12,
      },
    }),
  );

  const firstPageLoaded =
    status !== "LoadingFirstPage" && fontsPaginated.length >= 12;

  const fonts = firstPageLoaded ? fontsPaginated : firstPageFonts.page;

  return <div>{fonts.map((f) => f.family)}</div>;
}