improve lazy loading ui
This commit is contained in:
parent
f739c61197
commit
437de2be20
@ -1,5 +1,6 @@
|
||||
import { FC, LazyExoticComponent, ReactNode, Suspense } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Spinner } from '@fluentui/react-components';
|
||||
|
||||
interface LazyImportComponentProps {
|
||||
lazyChildren: LazyExoticComponent<FC<any>>;
|
||||
@ -11,7 +12,10 @@ export const LazyImportComponent: FC<LazyImportComponentProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Suspense fallback={<div>{t('Loading...')}</div>}>
|
||||
<Suspense fallback={
|
||||
<div className="flex justify-center items-center h-full w-full">
|
||||
<Spinner size="huge" label={t('Loading...')} />
|
||||
</div>}>
|
||||
<props.lazyChildren {...props.lazyProps}>
|
||||
{props.children}
|
||||
</props.lazyChildren>
|
||||
|
Loading…
Reference in New Issue
Block a user