error when using preload query with authentication

[chenxin-yan]

I am referring to this documentation

Here are the components:

import { getAuthToken } from "@/lib/convex";
import { api } from "@/_generated/api";
import { preloadQuery } from "convex/nextjs";
import { ScheduleContent } from "./components/schedule-content";

const SchedulePage = async () => {
  const token = await getAuthToken();
  const preloadedClasses = await preloadQuery(
    api.userCourseOfferings.getUserCourseOfferings,
    {},
    { token },
  );

  return <ScheduleContent preloadedClasses={preloadedClasses} />;
};

export default SchedulePage;

"use client";

import { api } from "@/_generated/api";
import { Preloaded, usePreloadedQuery } from "convex/react";
import { ScheduleCalendar } from "./schedule-calendar";

interface ScheduleContentProps {
  preloadedClasses: Preloaded<
    typeof api.userCourseOfferings.getUserCourseOfferings
  >;
}

export function ScheduleContent({ preloadedClasses }: ScheduleContentProps) {
  const classes = usePreloadedQuery(preloadedClasses);

  return <ScheduleCalendar classes={classes} />;
}

When loading the schedule page, I got this Not Authenticted error. The reason is that when usePreloadedQuery is launched, the auth token is not loaded yet. I have to create another client side component that wraps the schedule content in <Authenticated/>, however, this lead to the entire page to wait til the auth token to be loaded. Is there a way to skip the usePreloadedQuery like the way you can skip useQuery or other alternatives?