useSuspenseQuery + TansTack Start with better-auth

const { data: users, isLoading: isUsersLoading } = useQuery({
        queryKey: ["users"],
        queryFn: async () => {
            const data = await client.admin.listUsers(
                {
                    query: {
                        limit: 10,
                        sortBy: "createdAt",
                        sortDirection: "desc",
                    },
                },
                {
                    throw: true,
                },
            );
            return data?.users || [];
        },
    });

const fetchlistUsers = createServerFn({ method: 'GET' }).handler(async () => {
    const users = await auth.api.listUsers({
        query: {
            limit: 50,
            sortBy: 'createdAt',
            sortDirection: 'desc',
        },
        headers: await getWebRequest().headers,
    });

    return users?.users;
});

const listUsersQueryOptions = () =>
    queryOptions({
        queryKey: ['users'],
        queryFn: () => fetchlistUsers(),
    });

export const Route = createFileRoute('/_auth/_pathlessLayout/admin')({
    loader: async ({ context }) => {
        await context.queryClient.ensureQueryData(listUsersQueryOptions());
    },
    component: AdminDashboard,
});
// in the component
const { data: users = [] } = useSuspenseQuery(listUsersQueryOptions());