14
14
// You should have received a copy of the GNU Affero General Public License
15
15
// along with this program. If not, see <http://www.gnu.org/licenses/>.
16
16
17
- import React from "react" ;
17
+ import React , { Suspense } from "react" ;
18
18
import history from "../../../history" ;
19
19
import { Redirect , Route , Router , Switch , withRouter } from "react-router-dom" ;
20
20
import { connect } from "react-redux" ;
21
21
import { AppState } from "../../../store" ;
22
22
import { setMenuOpen } from "../../../actions" ;
23
23
import NotFoundPage from "../../NotFoundPage" ;
24
- import ListBuckets from "./ListBuckets/ListBuckets" ;
25
- import BucketDetails from "./BucketDetails/BucketDetails" ;
26
- import BrowserHandler from "./BucketDetails/BrowserHandler" ;
27
- import AddBucket from "./ListBuckets/AddBucket" ;
24
+
25
+ const ListBuckets = React . lazy ( ( ) => import ( "./ListBuckets/ListBuckets" ) ) ;
26
+ const BucketDetails = React . lazy ( ( ) => import ( "./BucketDetails/BucketDetails" ) ) ;
27
+ const BrowserHandler = React . lazy (
28
+ ( ) => import ( "./BucketDetails/BrowserHandler" )
29
+ ) ;
30
+ const AddBucket = React . lazy ( ( ) => import ( "./ListBuckets/AddBucket" ) ) ;
28
31
29
32
const mapState = ( state : AppState ) => ( {
30
33
open : state . system . sidebarOpen ,
@@ -36,20 +39,65 @@ const Buckets = () => {
36
39
return (
37
40
< Router history = { history } >
38
41
< Switch >
39
- < Route path = "/add-bucket" component = { AddBucket } />
40
- < Route path = "/buckets/:bucketName/admin/*" component = { BucketDetails } />
41
- < Route path = "/buckets/:bucketName/admin" component = { BucketDetails } />
42
+ < Route
43
+ path = "/add-bucket"
44
+ children = { ( routerProps ) => (
45
+ < Suspense fallback = { < div > Loading...</ div > } >
46
+ < AddBucket />
47
+ </ Suspense >
48
+ ) }
49
+ />
50
+ < Route
51
+ path = "/buckets/:bucketName/admin/*"
52
+ children = { ( routerProps ) => (
53
+ < Suspense fallback = { < div > Loading...</ div > } >
54
+ < BucketDetails { ...routerProps } />
55
+ </ Suspense >
56
+ ) }
57
+ />
58
+ < Route
59
+ path = "/buckets/:bucketName/admin"
60
+ children = { ( routerProps ) => (
61
+ < Suspense fallback = { < div > Loading...</ div > } >
62
+ < BucketDetails { ...routerProps } />
63
+ </ Suspense >
64
+ ) }
65
+ />
42
66
< Route
43
67
path = "/buckets/:bucketName/browse/:subpaths+"
44
- component = { BrowserHandler }
68
+ children = { ( routerProps ) => (
69
+ < Suspense fallback = { < div > Loading...</ div > } >
70
+ < BrowserHandler { ...routerProps } />
71
+ </ Suspense >
72
+ ) }
73
+ />
74
+ < Route
75
+ path = "/buckets/:bucketName/browse"
76
+ children = { ( routerProps ) => (
77
+ < Suspense fallback = { < div > Loading...</ div > } >
78
+ < BrowserHandler { ...routerProps } />
79
+ </ Suspense >
80
+ ) }
45
81
/>
46
- < Route path = "/buckets/:bucketName/browse" component = { BrowserHandler } />
47
82
< Route
48
83
path = "/buckets/:bucketName"
49
84
component = { ( ) => < Redirect to = { `/buckets` } /> }
50
85
/>
51
- < Route path = "/" component = { ListBuckets } />
52
- < Route component = { NotFoundPage } />
86
+ < Route
87
+ path = "/"
88
+ children = { ( routerProps ) => (
89
+ < Suspense fallback = { < div > Loading...</ div > } >
90
+ < ListBuckets { ...routerProps } />
91
+ </ Suspense >
92
+ ) }
93
+ />
94
+ < Route
95
+ children = { ( routerProps ) => (
96
+ < Suspense fallback = { < div > Loading...</ div > } >
97
+ < NotFoundPage />
98
+ </ Suspense >
99
+ ) }
100
+ />
53
101
</ Switch >
54
102
</ Router >
55
103
) ;
0 commit comments