From 6919f50b3bdc2928f347ee3264afdf07d51756d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=B6=E9=97=B4?= <80795289@qq.com>
Date: Thu, 4 Nov 2021 00:19:42 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=88=B7=E6=96=B0=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E8=B7=B3=E8=BD=AC404=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/user.ts     |  5 +++--
 src/layouts/index.tsx | 33 +++++++++++++++++++--------------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/hooks/user.ts b/src/hooks/user.ts
index 80f24ae..db87c4b 100644
--- a/src/hooks/user.ts
+++ b/src/hooks/user.ts
@@ -18,8 +18,9 @@ export default function useUserInfo() {
 
   useEffect(() => {
     setLoading(true)
-
-    fetchData()
+    fetchData().then((() => {
+      setLoading(false)
+    }))
   }, [])
 
   return { loading, userData, setUserData }
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index b62d67e..ccd271a 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -1,18 +1,19 @@
-import { FC, useEffect } from 'react'
+import { FC, useEffect, lazy } from 'react'
 import { RouteComponentProps } from 'react-router'
-import { Layout } from 'antd'
+import { Layout, Spin } from 'antd'
 import useUserInfo from '@/hooks/user'
 import { useStore } from '@/store'
 import { observer } from 'mobx-react'
 import AppSider from './Sider'
-import AppHeader from './Header'
-import AppContent from './Content'
 
 import './index.scss'
 
+const AppHeader = lazy(() => import('./Header'))
+const AppContent = lazy(() => import('./Content'))
+
 const AppLayout: FC<RouteComponentProps> = () => {
   // 登录后me接口信息存入mobx-userStroe
-  const { userData } = useUserInfo()
+  const { userData, loading } = useUserInfo()
   const { userStore } = useStore()
   const setUserStore = () => {
     userStore.getUserData(userData)
@@ -22,17 +23,21 @@ const AppLayout: FC<RouteComponentProps> = () => {
     // eslint-disable-next-line
   }, [userData])
 
-  return (
-    <Layout style={{ height: '100vh', overflow: 'auto' }}>
-      <div className="sider-box">
-        <AppSider />
-      </div>
+  const appBody = () => {
+    if (loading) return <Spin />
+    return (
       <Layout style={{ height: '100vh', overflow: 'auto' }}>
-        <AppHeader />
-        <AppContent />
+        <div className="sider-box">
+          <AppSider />
+        </div>
+        <Layout style={{ height: '100vh', overflow: 'auto' }}>
+          <AppHeader />
+          <AppContent />
+        </Layout>
       </Layout>
-    </Layout>
-  )
+    )
+  }
+  return appBody()
 }
 
 export default observer(AppLayout)
-- 
Gitee