diff --git a/src/hooks/user.ts b/src/hooks/user.ts
index 80f24ae6f6886027250f938413815de412fba071..db87c4b86618579852c4e8be3467936e1b089510 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 b62d67ec9553cd1b59999689cc9df0c27ce281a1..ccd271afc17d21db5e94fe9162c4e9135017e501 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)