React loader implementation

loader-example.tsx

import React from 'react';

export default function LoaderExample() {
  comst {data, loading, error} = useMyQuery(); // Implementation specific
  const {Loader, data: myData} = useLoader({
    data,
    errorMessage: error?.message,
    isLoading: loading,
  });
  return (
    <Loader>
      {myData && JSON.stringify(myData)}
    </Loader>
  );
}

loader.tsx

import {Text} from '@/design-system';
import React, {PropsWithChildren, useEffect, useState} from 'react';
import Center from './center';
import Spinner from './spinner';

function Loading() {
  return (
    <Center>
      <Spinner width={100} />
    </Center>
  );
}

type ErrorProps = {
  errorMessage: string;
};

function Error({errorMessage}: ErrorProps) {
  return (
    <Center>
      <Text color="mediumContrast" fontSize={4} fontWeight="bold">
        {errorMessage}
      </Text>
    </Center>
  );
}

type LoaderConfig<T> = {
  data: T;
  delay?: number;
  errorMessage?: string;
  isLoading: boolean;
};

export function useLoader<T>({
  data,
  delay = 800,
  errorMessage,
  isLoading,
}: LoaderConfig<T>) {
  return {
    Loader({children}: PropsWithChildren<{}>) {
      const [isDone, setIsDone] = useState(false);
      useEffect(() => {
        const timer = setTimeout(() => {
          setIsDone(true);
        }, delay);
        return () => clearTimeout(timer);
      }, []);
      if (isLoading || !isDone) {
        return <Loading />;
      }
      if (errorMessage) {
        return <Error errorMessage={errorMessage} />;
      }
      return <>{children}</>;
    },
    data,
  };
}