fix: 修复Loading问题

JackySoft · Aug 28, 2024 · cbe7ee2 · cbe7ee2
1 parent ec4741b
commit cbe7ee2
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/packages/editor/src/pages/home/LibList.tsx b/packages/editor/src/pages/home/LibList.tsx
@@ -15,7 +15,7 @@ import style from './index.module.less';
 export default () => {
   const [form] = Form.useForm();
   const [list, setList] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [total, setTotal] = useState<number>(0);
   const [current, setCurrent] = useState<number>(1);
   const [pageSize, setPageSize] = useState<number>(10);
@@ -101,7 +101,7 @@ export default () => {
 
   return (
     <div className={style.libWrap}>
-      {total > 0 ? (
+      {total > 0 || loading ? (
         <>
           <SearchBar form={form} from="组件" submit={handleSearch} refresh={getList} onCreate={handleCreate} />
           <div className={style.libList}>

diff --git a/packages/editor/src/pages/home/PageList.tsx b/packages/editor/src/pages/home/PageList.tsx
@@ -167,7 +167,7 @@ export default function Index() {
   return (
     <>
       <Layout.Content className={styles.pageList}>
-        {total > 0 ? (
+        {total > 0 || loading ? (
           <>
             <SearchBar form={form} from="页面" submit={handleSearch} refresh={getList} onCreate={handleCreate} />
             <div className={styles.pagesContent}>

diff --git a/packages/editor/src/pages/home/ProjectList.tsx b/packages/editor/src/pages/home/ProjectList.tsx
@@ -19,7 +19,6 @@ export default function Index() {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(true);
   const [projectList, setProjectList] = useState<Project.ProjectItem[]>([]);
-  const [projectId, setProjectId] = useState(-1);
   const [total, setTotal] = useState<number>(0);
   const [current, setCurrent] = useState<number>(1);
   const [pageSize, setPageSize] = useState<number>(12);
@@ -166,7 +165,7 @@ export default function Index() {
   return (
     <>
       <Layout.Content className={styles.project}>
-        {total > 0 ? (
+        {total > 0 || loading ? (
           <>
             <SearchBar form={form} from="项目" submit={handleSearch} refresh={getList} onCreate={() => navigate('/project/0/config')} />
             <div className={styles.projectList}>

diff --git a/packages/editor/src/router/LazyLoad.tsx b/packages/editor/src/router/LazyLoad.tsx
@@ -5,9 +5,12 @@ import { Spin } from 'antd';
  * @param Component 组件对象
  * @returns 返回新组件
  */
-export const lazyLoad = (Component: React.FC): React.ReactNode => {
+export const lazyLoad = (Component: React.FC, isEditor?: boolean): React.ReactNode => {
+  // 编辑器组件由于比较慢，增加一个Loading效果
   return (
-    <Suspense fallback={<Spin size="large" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }} />}>
+    <Suspense
+      fallback={isEditor ? <Spin size="large" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 30 }} /> : null}
+    >
       <Component />
     </Suspense>
   );

diff --git a/packages/editor/src/router/index.tsx b/packages/editor/src/router/index.tsx
@@ -64,11 +64,17 @@ export const router = [
       },
       {
         path: '/editor/:id',
-        element: lazyLoad(React.lazy(() => import('@/layout/EditLayout'))),
+        element: lazyLoad(
+          React.lazy(() => import('@/layout/EditLayout')),
+          true,
+        ),
         children: [
           {
             path: '/editor/:id/edit',
-            element: lazyLoad(React.lazy(() => import('@/pages/editor/editor'))),
+            element: lazyLoad(
+              React.lazy(() => import('@/pages/editor/editor')),
+              true,
+            ),
           },
         ],
       },