From 437de2be20d0afe5bbe399dd21e433a3e33cd2c7 Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Sat, 18 Nov 2023 13:59:37 +0800
Subject: [PATCH] improve lazy loading ui

---
 frontend/src/components/LazyImportComponent.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/LazyImportComponent.tsx b/frontend/src/components/LazyImportComponent.tsx
index 3c154d2..17f8d0f 100644
--- a/frontend/src/components/LazyImportComponent.tsx
+++ b/frontend/src/components/LazyImportComponent.tsx
@@ -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>