feat: 首页加载速度优化

web/src/App.js

@@ -22,9 +22,10 @@ import Log from './pages/Log';
 import Chat from './pages/Chat';
 import { Layout } from '@douyinfe/semi-ui';
 import Midjourney from './pages/Midjourney';
-import Detail from './pages/Detail';
+// import Detail from './pages/Detail';
 
 const Home = lazy(() => import('./pages/Home'));
+const Detail = lazy(() => import('./pages/Detail'));
 const About = lazy(() => import('./pages/About'));
 
 function App() {
@@ -202,7 +203,9 @@ function App() {
             path="/detail"
             element={
               <PrivateRoute>
-                <Detail />
+                <Suspense fallback={<Loading></Loading>}>
+                  <Detail />
+                </Suspense>
               </PrivateRoute>
             }
           />
@@ -210,7 +213,9 @@ function App() {
             path="/midjourney"
             element={
               <PrivateRoute>
-                <Midjourney />
+                <Suspense fallback={<Loading></Loading>}>
+                  <Midjourney />
+                </Suspense>
               </PrivateRoute>
             }
           />

web/src/components/Loading.js

@@ -1,13 +1,9 @@
 import React from 'react';
-import { Dimmer, Loader, Segment } from 'semantic-ui-react';
+import { Spin } from '@douyinfe/semi-ui';
 
 const Loading = ({ prompt: name = 'page' }) => {
   return (
-    <Segment style={{ height: 100 }}>
-      <Dimmer active inverted>
-        <Loader indeterminate>加载{name}中...</Loader>
-      </Dimmer>
-    </Segment>
+    <Spin style={{height: 100}} spinning={true}>加载{name}中...</Spin>
   );
 };
 

web/src/index.js

@@ -1,4 +1,3 @@
-import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {BrowserRouter} from 'react-router-dom';
@@ -15,9 +14,7 @@ import {Layout} from "@douyinfe/semi-ui";
 import SiderBar from "./components/SiderBar";
 
 // initialization
-initVChartSemiTheme({
-    isWatchingThemeSwitch: true,
-});
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 const {Sider, Content, Header} = Layout;

web/src/pages/Detail/index.js

@@ -1,4 +1,6 @@
 import React, {useEffect, useRef, useState} from 'react';
+import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
+
 import {Button, Col, Form, Layout, Row, Spin} from "@douyinfe/semi-ui";
 import VChart from '@visactor/vchart';
 import {API, isAdmin, showError, timestamp2string, timestamp2string1} from "../../helpers";
@@ -292,6 +294,9 @@ const Detail = (props) => {
         //     formRef.current.formApi.setValue('start_timestamp', st);
         // }
         if (!initialized.current) {
+            initVChartSemiTheme({
+                isWatchingThemeSwitch: true,
+            });
             initialized.current = true;
             initChart();
         }