feat: add Suspense

web/src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
 import { TcProvider, useColorScheme, useLanguage } from 'tailchat-shared';
 import clsx from 'clsx';
@@ -8,6 +8,7 @@ import { parseColorScheme } from './utils/color-scheme-helper';
 import { Helmet } from 'react-helmet';
 import { useRecordMeasure } from './utils/measure-helper';
 import { getPopupContainer } from './utils/dom-helper';
+import { LoadingSpinner } from './components/LoadingSpinner';
 
 const MainRoute = Loadable(() => import('./routes/Main'));
 
@@ -19,6 +20,7 @@ const InviteRoute = Loadable(() => import('./routes/Invite'));
 
 const AppProvider: React.FC = React.memo((props) => {
   return (
+    <Suspense fallback={<LoadingSpinner />}>
       <BrowserRouter>
         <TcProvider>
           <AntdProvider getPopupContainer={getPopupContainer}>
@@ -26,6 +28,7 @@ const AppProvider: React.FC = React.memo((props) => {
           </AntdProvider>
         </TcProvider>
       </BrowserRouter>
+    </Suspense>
   );
 });
 AppProvider.displayName = 'AppProvider';