veza/apps/web/src/components/ui/LazyComponent.tsx

import { Suspense, lazy, type ComponentType } from 'react';
import { LoadingSpinner } from './loading-spinner';

interface LazyComponentProps {
  fallback?: React.ReactNode;
}

export function createLazyComponent<T extends ComponentType<any>>(
  importFunc: () => Promise<{ default: T }>,
  fallback?: React.ReactNode,
) {
  const LazyComponent = lazy(importFunc);

  return function WrappedLazyComponent(
    props: React.ComponentProps<T> & LazyComponentProps,
  ) {
    return (
      <Suspense fallback={fallback || <LoadingSpinner />}>
        <LazyComponent {...props} />
      </Suspense>
    );
  };
}

// Composants lazy communs
export const LazyDashboard = createLazyComponent(() =>
  import('@/pages/DashboardPage').then((m) => ({ default: m.DashboardPage })),
);
export const LazyChat = createLazyComponent(() =>
  import('@/features/chat/pages/ChatPage').then((m) => ({
    default: m.ChatPage,
  })),
);
export const LazyLibrary = createLazyComponent(
  () => import('@/features/library/pages/LibraryPage'),
);
export const LazyProfile = createLazyComponent(() =>
  import('@/pages/ProfilePage').then((m) => ({ default: m.ProfilePage })),
);
export const LazySettings = createLazyComponent(() =>
  import('@/features/settings/pages/SettingsPage').then((m) => ({
    default: m.SettingsPage,
  })),
);
export const LazyLogin = createLazyComponent(() =>
  import('@/pages/LoginPage').then((m) => ({ default: m.LoginPage })),
);
export const LazyRegister = createLazyComponent(() =>
  import('@/pages/RegisterPage').then((m) => ({ default: m.RegisterPage })),
);
export const LazyForgotPassword = createLazyComponent(
  () => import('@/features/auth/pages/ForgotPasswordPage'),
);
export const LazyVerifyEmail = createLazyComponent(
  () => import('@/features/auth/pages/VerifyEmailPage'),
);
export const LazyResetPassword = createLazyComponent(
  () => import('@/features/auth/pages/ResetPasswordPage'),
);
export const LazySessions = createLazyComponent(
  () => import('@/features/auth/pages/SessionsPage'),
);
export const LazyNotFound = createLazyComponent(
  () => import('@/features/error/pages/NotFoundPage'),
);
export const LazyServerError = createLazyComponent(
  () => import('@/features/error/pages/ServerErrorPage'),
);
export const LazyUserProfile = createLazyComponent(() =>
  import('@/features/profile/pages/UserProfilePage').then((m) => ({
    default: m.UserProfilePage,
  })),
);
export const LazyRoles = createLazyComponent(() =>
  import('@/features/roles/pages/RolesPage').then((m) => ({
    default: m.RolesPage,
  })),
);
export const LazyTrackDetail = createLazyComponent(() =>
  import('@/features/tracks/pages/TrackDetailPage').then((m) => ({
    default: m.TrackDetailPage,
  })),
);
export const LazyPlaylistRoutes = createLazyComponent(() =>
  import('@/features/playlists/routes').then((m) => ({
    default: m.PlaylistRoutes,
  })),
);
export const LazyMarketplace = createLazyComponent(() =>
  import('@/pages/marketplace/MarketplaceHome').then((m) => ({
    default: m.MarketplaceHome,
  })),
);