44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import { lazy, Suspense, ComponentType, ReactNode } from 'react';
|
|
|
|
// Utility to create lazy loaded components with error boundary
|
|
export function lazyWithPreload<T extends ComponentType<any>>(
|
|
importFn: () => Promise<{ default: T }>
|
|
) {
|
|
const LazyComponent = lazy(importFn);
|
|
|
|
// Add preload method
|
|
(LazyComponent as any).preload = importFn;
|
|
|
|
return LazyComponent;
|
|
}
|
|
|
|
// Default loading component
|
|
const DefaultLoader = () => (
|
|
<div className="flex justify-center items-center h-32">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
</div>
|
|
);
|
|
|
|
// Wrapper component with loading fallback
|
|
export function LazyLoad({
|
|
component: Component,
|
|
fallback = <DefaultLoader />,
|
|
...props
|
|
}: {
|
|
component: ComponentType<any>;
|
|
fallback?: ReactNode;
|
|
[key: string]: any;
|
|
}) {
|
|
return (
|
|
<Suspense fallback={fallback}>
|
|
<Component {...props} />
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
// Preload components on hover/focus
|
|
export function preloadComponent(component: any) {
|
|
if (component.preload) {
|
|
component.preload();
|
|
}
|
|
} |