Asynchronous React component

index.tsx

import type { ReactNode } from "react";

interface AsynchronousComponentProps<TData> {
  children: (data: NonNullable<TData>) => ReactNode;
  data: TData;
  isLoading: boolean;
  loadingFallback: ReactNode;
  hasError: boolean;
  errorFallback: ReactNode;
}

export const AsynchronousComponent = <TData,>({
  children,
  data,
  isLoading,
  loadingFallback,
  hasError,
  errorFallback,
}: AsynchronousComponentProps<TData>) => {
  return isLoading
    ? loadingFallback
    : hasError
    ? errorFallback
    : data
    ? children(data)
    : undefined;
};