improve lazy loading ui

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>