55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
/**
|
|
* Компонент для ленивой загрузки Material Web Components
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { useEffect, useState, ReactNode } from 'react';
|
|
import { loadComponent } from '@/lib/material-components';
|
|
|
|
interface LazyMaterialComponentProps {
|
|
componentName: string;
|
|
children: ReactNode;
|
|
fallback?: ReactNode;
|
|
}
|
|
|
|
export function LazyMaterialComponent({
|
|
componentName,
|
|
children,
|
|
fallback = null,
|
|
}: LazyMaterialComponentProps) {
|
|
const [loaded, setLoaded] = useState(false);
|
|
const [error, setError] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
|
|
loadComponent(componentName)
|
|
.then(() => {
|
|
if (mounted) {
|
|
setLoaded(true);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.error(`[LazyMaterial] Error loading ${componentName}:`, err);
|
|
if (mounted) {
|
|
setError(true);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
mounted = false;
|
|
};
|
|
}, [componentName]);
|
|
|
|
if (error) {
|
|
return <>{fallback}</>;
|
|
}
|
|
|
|
if (!loaded) {
|
|
return <>{fallback}</>;
|
|
}
|
|
|
|
return <>{children}</>;
|
|
}
|