30 lines
910 B
TypeScript
30 lines
910 B
TypeScript
"use client";
|
|
|
|
import { Suspense, lazy } from "react";
|
|
|
|
interface LazyLoadProps {
|
|
children: React.ReactNode;
|
|
fallback?: React.ReactNode;
|
|
}
|
|
|
|
const LazyLoad: React.FC<LazyLoadProps> = ({
|
|
children,
|
|
fallback = (
|
|
<div className="flex items-center justify-center p-8">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
</div>
|
|
)
|
|
}) => {
|
|
return (
|
|
<Suspense fallback={fallback}>
|
|
{children}
|
|
</Suspense>
|
|
);
|
|
};
|
|
|
|
// Lazy load specific heavy components
|
|
export const LazyChart = lazy(() => import("react-apexcharts").then(module => ({ default: module.default || module })));
|
|
export const LazyMap = lazy(() => import("@react-google-maps/api").then(module => ({ default: module.GoogleMap || module })));
|
|
export const LazyPlayer = lazy(() => import("react-player").then(module => ({ default: module.default || module })));
|
|
|
|
export default LazyLoad;
|