HOC for Suspense and ErrorBoundary

export const RepositoryWrapper = ({
  children,
  loading = <div class="text-sky-800 p-4">Loading...</div>,
  error = <div class="text-red-800 p-4">Something went wrong</div>,
}: RepositoryWrapperProps) => {
  return (
    <ErrorBoundary fallback={error}>
      <Suspense fallback={loading}>{children()}</Suspense>
    </ErrorBoundary>
  );
};

export const RepositoryWrapper = ({
  children,
  loading = <div class="text-sky-800 p-4">Loading...</div>,
  error = <div class="text-red-800 p-4">Something went wrong</div>,
}: RepositoryWrapperProps) => {
  return (
    <ErrorBoundary fallback={error}>
      <Suspense fallback={loading}>{children()}</Suspense>
    </ErrorBoundary>
  );
};