/
githubmirror
/
ydb-embedded-ui
Обзор
Документация
Войти
/
githubmirror
/
ydb-embedded-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/utils/lazyComponent.tsx
50 строк
2 KB
Hellen
feat: move to node 20, update deps (#1792)
15 янв 2025, 15:24
Не верифицирован
15 янв 2025, 15:24
33ab5de
Код
Авторство
О чём код?
import React from 'react'; import {Loader} from '@gravity-ui/uikit'; import {useComponent} from '../components/ComponentsProvider/ComponentsProvider'; import {ErrorBoundaryFallback} from '../components/ErrorBoundary/ErrorBoundary'; export function lazyComponent<TExports extends {[key: string]: any}, TKey extends keyof TExports>( moduleLoader: () => Promise<TExports>, exportName: TKey, loader?: React.ReactNode, ) { const Component = React.lazy(() => moduleLoader() .then((module) => ({default: module[exportName] as React.ComponentType})) .catch((error) => ({default: () => <ErrorBoundaryFallback error={error} />})), ); const LazyComponent = React.forwardRef<TExports[TKey], React.ComponentProps<TExports[TKey]>>( (props, ref) => { const ErrorBoundary = useComponent('ErrorBoundary'); return ( <ErrorBoundary> <React.Suspense fallback={loader ?? <DefaultLoader />}> <Component ref={ref} {...props} /> </React.Suspense> </ErrorBoundary> ); }, ); LazyComponent.displayName = exportName as string; return LazyComponent; } function DefaultLoader() { return ( <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', }} > <Loader size="l" /> </div> ); }