Defer viewTransition until component can render without suspending

export const Route = createFileRoute("/calendar")({
  validateSearch: zodValidator(searchSchema),
  beforeLoad: ({ search }) => {
    return {
      queries: {
        calendarEventsUpcoming: calendarEventsUpcomingQuery(search.filter),
        calendarEventsCompleted: calendarEventsQuery(search.filter),
      },
    };
  },
  loader: async ({ context: { queryClient, queries } }) => {
    const [upcomingEvents, completedEvents] = await Promise.all([
      queryClient.ensureQueryData(queries.calendarEventsUpcoming),
      queryClient.ensureQueryData(queries.calendarEventsCompleted),
    ]);
    return { upcomingEvents, completedEvents };
// ...

function RouteComponent() {
  const { queries } = useRouteContext({ from: "/calendar" });
  const { data: upcomingData } = useSuspenseQuery(
    queries.calendarEventsUpcoming,
  );
  const { data: completedData } = useSuspenseQuery(
    queries.calendarEventsCompleted,
  );
  const navigate = useNavigate({ from: "/incidents/retrospectives" });
  const search = useSearch({ from: "/incidents/retrospectives" });

  const handleFilter = (value: string) => {
    void navigate({
      search: {
        filter: value,
      },
      viewTransition: true,
    });
  };

export const Route = createFileRoute("/calendar")({
  validateSearch: zodValidator(searchSchema),
  beforeLoad: ({ search }) => {
    return {
      queries: {
        calendarEventsUpcoming: calendarEventsUpcomingQuery(search.filter),
        calendarEventsCompleted: calendarEventsQuery(search.filter),
      },
    };
  },
  loader: async ({ context: { queryClient, queries } }) => {
    const [upcomingEvents, completedEvents] = await Promise.all([
      queryClient.ensureQueryData(queries.calendarEventsUpcoming),
      queryClient.ensureQueryData(queries.calendarEventsCompleted),
    ]);
    return { upcomingEvents, completedEvents };
// ...

function RouteComponent() {
  const { queries } = useRouteContext({ from: "/calendar" });
  const { data: upcomingData } = useSuspenseQuery(
    queries.calendarEventsUpcoming,
  );
  const { data: completedData } = useSuspenseQuery(
    queries.calendarEventsCompleted,
  );
  const navigate = useNavigate({ from: "/incidents/retrospectives" });
  const search = useSearch({ from: "/incidents/retrospectives" });

  const handleFilter = (value: string) => {
    void navigate({
      search: {
        filter: value,
      },
      viewTransition: true,
    });
  };