improve lazy loading ui

This commit is contained in:
josc146 2023-11-18 13:59:37 +08:00
parent f739c61197
commit 437de2be20

View File

@ -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>