S
SolidJS•17mo ago
ikprk

HOC for Suspense and ErrorBoundary

I was wondering whether it's possible to have following component: 
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>
  );
};
and use it without having to pass the children as function. If I try to do pass children as a JSX element, both Suspense and ErrorBoundary arent used at all.
2 Replies
Brendonovich
Brendonovich•17mo ago
If I try to do pass children as a JSX element, both Suspense and ErrorBoundary arent used at all
That's because you're destructuring props, which causes children to be evaulated before ErrorBoundary and Suspense are created. Avoid destructuring and children as a JSX element should work fine
ikprk
ikprkOP•17mo ago
Thank you very much!

Did you find this page helpful?