Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c195b0f

Browse files
Suspense loading
1 parent 5a8c8f6 commit c195b0f

File tree

2 files changed

+49
-45
lines changed

2 files changed

+49
-45
lines changed

‎client/src/App.js

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { useRoutes } from './routes'
99
import { useAuth } from './Hooks/auth.hook'
1010
import { AuthContext } from './Context/AuthContext'
1111
import { PageContext } from './Context/PageContext'
12-
import Header from './Pages/SharedComponents/Header'
12+
13+
const Header = React.lazy(() => import('./Pages/SharedComponents/Header'))
1314

1415
/**Рендер приложения */
1516
function App() {
@@ -21,7 +22,7 @@ function App() {
2122
const routes = useRoutes(isAuthenticated)
2223

2324
/**хук обновления навбара */
24-
const [nav, setNav] = React.useState()
25+
const [nav, setNav] = React.useState(<spanclassName="d-inline"style={{width: "70px",height: "46px"}}></span>)
2526

2627
/**рендер */
2728
return (
@@ -33,18 +34,20 @@ function App() {
3334
token, login, logout, userId, email, isAuthenticated
3435
}}>
3536
<PageContext.Provider value={{ setNav }}>
36-
<Router>
37-
<Header>{nav}</Header>
38-
{ready ?
39-
<div className="App pb-3 mb-3">
40-
{routes}
41-
</div>
42-
:
43-
<div className="container display-4 text-center p-5" >
44-
<Loader />
45-
</div>
46-
}
47-
</Router>
37+
<React.Suspense fallback={<div className="container display-4 text-center p-5" > <Loader /> </div>}>
38+
<Router>
39+
<Header>{nav}</Header>
40+
{ready ?
41+
<div className="App pb-3 mb-3">
42+
{routes}
43+
</div>
44+
:
45+
<div className="container display-4 text-center p-5" >
46+
<Loader />
47+
</div>
48+
}
49+
</Router>
50+
</React.Suspense>
4851
</PageContext.Provider>
4952
</AuthContext.Provider>
5053
)

‎client/src/routes.js

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,44 @@
33
*/
44
import React from 'react'
55
import { Switch, Route, Redirect } from 'react-router-dom'
6-
import NotesPage from './Pages/NotesPage'
7-
import AuthPage from './Pages/AuthPage'
8-
import AboutPage from './Pages/AboutPage'
6+
7+
const NotesPage = React.lazy(() => import('./Pages/NotesPage'))
8+
const AuthPage = React.lazy(() => import('./Pages/AuthPage'))
9+
const AboutPage = React.lazy(() => import('./Pages/AboutPage'))
910

1011
/**
1112
* Хук маршрутизации, содержаший в себе роуты
1213
* @param {*} isAuthenticated
1314
*/
1415
export const useRoutes = isAuthenticated => {
15-
if (isAuthenticated) {
16-
return (
17-
/**Набор роутов в случае авторизации */
18-
<Switch>
19-
<Route path="/auth" exact>
20-
<AuthPage />
21-
</Route>
22-
<Route path="/about" exact>
23-
<AboutPage />
24-
</Route>
25-
<Route path="/notes" exact>
26-
<NotesPage />
27-
</Route>
28-
<Redirect to="/notes" />
29-
</Switch>
30-
)
31-
}
32-
3316
return (
34-
/**Набор роутов в случае неавторизации */
35-
<Switch>
36-
<Route path="/auth" exact>
37-
<AuthPage />
38-
</Route>
39-
<Route path="/about" exact>
40-
<AboutPage />
41-
</Route>
42-
<Redirect to="/auth" />
43-
</Switch>
17+
<React.Suspense>
18+
{isAuthenticated ? (
19+
/**Набор роутов в случае авторизации */
20+
<Switch>
21+
<Route path="/auth" exact>
22+
<AuthPage />
23+
</Route>
24+
<Route path="/about" exact>
25+
<AboutPage />
26+
</Route>
27+
<Route path="/notes" exact>
28+
<NotesPage />
29+
</Route>
30+
<Redirect to="/notes" />
31+
</Switch>
32+
) : (
33+
/**Набор роутов в случае неавторизации */
34+
<Switch>
35+
<Route path="/auth" exact>
36+
<AuthPage />
37+
</Route>
38+
<Route path="/about" exact>
39+
<AboutPage />
40+
</Route>
41+
<Redirect to="/auth" />
42+
</Switch>
43+
)}
44+
</React.Suspense>
4445
)
4546
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /