withSuspense.tsx

import { ComponentType, Suspense } from 'react';

export function withSuspense<T extends {}>(
  Component: ComponentType<T>,
  Fallback: ComponentType<Partial<T>>
) {
  const displayName = Component.displayName || Component.name || 'Component';

  function ComponentWithSuspense(props: T) {
    return (
      <Suspense fallback={<Fallback />}>
        <Component {...(props as T)} />
      </Suspense>
    );
  }

  ComponentWithSuspense.displayName = `withSuspense(${displayName})`;

  return ComponentWithSuspense;
}