import { Suspense } from 'react';

import { Loading } from '@/widgets/loading/loading';

export const Loadable = (Component: React.ComponentType<any>) => {
  const LoadableComponent = (props: any) => {
    return (
      <Suspense fallback={<Loading />}>
        <Component {...props} />
      </Suspense>
    );
  };

  LoadableComponent.displayName = `Loadable(${Component.displayName || Component.name || 'Component'})`;

  return LoadableComponent;
};
