awaiter.tsx

import * as React from "react";

interface Props<T extends Promise<any>[]> {
  promises: T;
  children: (results: { [P in keyof T]: Awaited<T[P]> }) => React.ReactNode;
}

export function Awaiter<T extends Promise<any>[]>({ promises, children }: Props<T>) {
  const results = React.use(Promise.all(promises));
  return <>{children(results)}</>;
}

example.tsx

export function EmailNotVerified({ children }: EmailNotVerifiedProps) {
  return (
    <React.Suspense>
      <Awaiter promises={[authClient.getAuthUser()]}>
        {([user]) => {
          if (!user || user?.emailVerified) {
            return null;
          }
          return children;
        }}
      </Awaiter>
    </React.Suspense>
  );
}