Await component

await.tsx

import type { JSX } from 'react';

interface AwaitProps<T> {
  promise: Promise<T>;
  children: (result: T) => JSX.Element;
}

const Await = async <T,>({ promise, children }: AwaitProps<T>) => {
  const result = await promise;

  return children(result);
};

export default Await;

page.tsx

import { Await } from 'components';
import { Suspense } from 'react';

const Page = async () => {
  // Page blocks on this data:
  const data = await getData();

  return (
    <div>
      <Suspense fallback='loading ...'>
        {/* ...but renders a spinner for this slower data: */}
        <Await promise={getOtherData(data)}>
          {(stories) => (
            <ul>
              {stories.map((story) => (
                <li key={story.id}>{story.title}</li>
              ))}
            </ul>
          )}
        </Await>
      </Suspense>
    </div>
  );
};