💄 style: 优化 App 首页 Loading 态

src/pages/index.page.tsx

@@ -1,33 +1,18 @@
-import { Icon } from '@lobehub/ui';
-import { useWhyDidYouUpdate } from 'ahooks';
-import { Loader2 } from 'lucide-react';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center } from 'react-layout-kit';
 
 import { sessionSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
 import Chat from './chat/index.page';
+import Loading from './index/Loading';
 import Welcome from './welcome/index.page';
 
-const Loading = memo(() => {
-  const { t } = useTranslation('common');
-
-  return (
-    <Center gap={12} height={'100vh'} width={'100%'}>
-      <Icon icon={Loader2} size={{ fontSize: 64 }} spin />
-      {t('appInitializing')}
-    </Center>
-  );
-});
-
-export default memo(() => {
+const Home = memo(() => {
   const hydrated = useSessionHydrated();
   const hasSession = useSessionStore(sessionSelectors.hasSessionList);
 
-  useWhyDidYouUpdate('index.page', { hasSession, hydrated });
-
   if (!hydrated) return <Loading />;
 
   return !hasSession ? <Welcome /> : <Chat />;
 });
+
+export default Home;

src/pages/index/Loading.tsx

@@ -0,0 +1,35 @@
+import { GridBackground, Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { Loader2 } from 'lucide-react';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+const Loading = memo(() => {
+  const { t } = useTranslation('common');
+
+  const theme = useTheme();
+
+  return (
+    <Flexbox height={'100vh'} width={'100%'}>
+      <GridBackground
+        animation
+        colorBack={rgba(theme.colorText, 0.12)}
+        colorFront={rgba(theme.colorText, 0.4)}
+        flip
+      />
+      <Center flex={1} gap={12} width={'100%'}>
+        <Icon icon={Loader2} size={{ fontSize: 64 }} spin />
+        {t('appInitializing')}
+      </Center>
+      <GridBackground
+        animation
+        colorBack={rgba(theme.colorText, 0.12)}
+        colorFront={rgba(theme.colorText, 0.4)}
+      />
+    </Flexbox>
+  );
+});
+
+export default Loading;