Skip to content

Commit 0720fff

Browse files
optionsomeoptionsome
committed
Remove more lazy loading
1 parent a928189 commit 0720fff

5 files changed

Lines changed: 96 additions & 118 deletions

File tree

‎app/component/AppBarContainer.js‎

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import PropTypes from 'prop-types';
2-
import React, { Suspense, lazy } from 'react';
2+
import React from 'react';
33
import { matchShape, routerShape } from 'found';
44
import { FormattedMessage } from 'react-intl';
55
import getContext from 'recompose/getContext';
66
import connectToStores from 'fluxible-addons-react/connectToStores';
77
import withBreakpoint from '../util/withBreakpoint';
88
import { favouriteShape, userShape } from '../util/shapes';
9-
10-
const AppBar = lazy(() => import('./AppBar'));
11-
const AppBarHsl = lazy(() => import('./AppBarHsl'));
12-
const MessageBar = lazy(() => import('./MessageBar'));
9+
import AppBar from './AppBar';
10+
import AppBarHsl from './AppBarHsl';
11+
import MessageBar from './MessageBar';
1312

1413
const AppBarContainer = ({
1514
router,
@@ -37,36 +36,31 @@ const AppBarContainer = ({
3736
</a>
3837
{style === 'hsl' ? (
3938
<div className="hsl-header-container" style={{ display: 'block' }}>
40-
<Suspense fallback="">
41-
<AppBarHsl user={user} lang={lang} favourites={favourites} />
42-
<MessageBar breakpoint={breakpoint} />
43-
</Suspense>
39+
<AppBarHsl user={user} lang={lang} favourites={favourites} />
40+
<MessageBar breakpoint={breakpoint} />
4441
</div>
4542
) : (
46-
<Suspense fallback="">
47-
<AppBar
48-
{...args}
49-
showLogo
50-
logo={logo}
51-
homeUrl={homeUrl}
52-
user={user}
53-
breakpoint={breakpoint}
54-
titleClicked={() =>
55-
router.push({
56-
...match.location,
57-
pathname: homeUrl,
58-
state: {
59-
...match.location.state,
60-
errorBoundaryKey:
61-
match.location.state &&
62-
match.location.state.errorBoundaryKey
63-
? match.location.state.errorBoundaryKey + 1
64-
: 1,
65-
},
66-
})
67-
}
68-
/>
69-
</Suspense>
43+
<AppBar
44+
{...args}
45+
showLogo
46+
logo={logo}
47+
homeUrl={homeUrl}
48+
user={user}
49+
breakpoint={breakpoint}
50+
titleClicked={() =>
51+
router.push({
52+
...match.location,
53+
pathname: homeUrl,
54+
state: {
55+
...match.location.state,
56+
errorBoundaryKey:
57+
match.location.state && match.location.state.errorBoundaryKey
58+
? match.location.state.errorBoundaryKey + 1
59+
: 1,
60+
},
61+
})
62+
}
63+
/>
7064
)}
7165
</>
7266
);

‎app/component/AppBarHsl.js‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
/* eslint-disable camelcase */
22
import PropTypes from 'prop-types';
3-
import React, { useState, useEffect, useRef, lazy, Suspense } from 'react';
3+
import React, { useState, useEffect, useRef } from 'react';
44
import { intlShape } from 'react-intl';
55
import { matchShape } from 'found';
66
import { Helmet } from 'react-helmet';
7+
import SiteHeader from '@hsl-fi/site-header';
78
import { favouriteShape, configShape } from '../util/shapes';
89
import { clearOldSearches, clearFutureRoutes } from '../util/storeUtils';
910
import { getJson } from '../util/xhrPromise';
1011

11-
const SiteHeader = lazy(() => import('@hsl-fi/site-header'));
12-
1312
const clearStorages = context => {
1413
clearOldSearches(context);
1514
clearFutureRoutes(context);
@@ -127,20 +126,18 @@ const AppBarHsl = ({ lang, user, favourites }, context) => {
127126
</Helmet>
128127
)}
129128

130-
<Suspense fallback="">
131-
{!config.hideHeader && (
132-
<SiteHeader
133-
ref={siteHeaderRef}
134-
hslFiUrl={config.URL.ROOTLINK}
135-
lang={lang}
136-
{...userMenu}
137-
languageMenu={languages}
138-
banners={banners}
139-
suggestionsApiUrl={config.URL.HSL_FI_SUGGESTIONS}
140-
notificationApiUrls={notificationApiUrls}
141-
/>
142-
)}
143-
</Suspense>
129+
{!config.hideHeader && (
130+
<SiteHeader
131+
ref={siteHeaderRef}
132+
hslFiUrl={config.URL.ROOTLINK}
133+
lang={lang}
134+
{...userMenu}
135+
languageMenu={languages}
136+
banners={banners}
137+
suggestionsApiUrl={config.URL.HSL_FI_SUGGESTIONS}
138+
notificationApiUrls={notificationApiUrls}
139+
/>
140+
)}
144141
</>
145142
);
146143
};

‎app/component/DisruptionInfo.js‎

Lines changed: 46 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,63 @@
11
import PropTypes from 'prop-types';
2-
import React, { useContext, lazy, Suspense } from 'react';
2+
import React, { useContext } from 'react';
33
import { graphql, QueryRenderer, ReactRelayContext } from 'react-relay';
44
import { intlShape } from 'react-intl';
5+
import Modal from '@hsl-fi/modal';
56
import Loading from './Loading';
67
import DisruptionListContainer from './DisruptionListContainer';
78

8-
const Modal = lazy(() => import('@hsl-fi/modal'));
9-
109
export default function DisruptionInfo(props, context) {
1110
const { setOpen } = props;
1211
const { intl } = context;
1312
const { environment } = useContext(ReactRelayContext);
1413

1514
return (
16-
<Suspense fallback="">
17-
<Modal
18-
appElement="#app"
19-
closeButtonLabel={intl.formatMessage({ id: 'close' })}
20-
contentLabel={intl.formatMessage({
21-
id: 'disruption-info',
22-
defaultMessage: 'Disruption info',
23-
})}
24-
isOpen
25-
onCrossClick={() => setOpen(false)}
26-
onClose={() => setOpen(false)}
27-
shouldCloseOnEsc
28-
shouldCloseOnOverlayClick
29-
>
30-
<div className="momentum-scroll" style={{ maxHeight: '80vh' }}>
31-
<QueryRenderer
32-
cacheConfig={{ force: true, poll: 30 * 1000 }}
33-
query={graphql`
34-
query DisruptionInfoQuery($feedIds: [String!]) {
35-
viewer {
36-
...DisruptionListContainer_viewer
37-
@arguments(feedIds: $feedIds)
38-
}
15+
<Modal
16+
appElement="#app"
17+
closeButtonLabel={intl.formatMessage({ id: 'close' })}
18+
contentLabel={intl.formatMessage({
19+
id: 'disruption-info',
20+
defaultMessage: 'Disruption info',
21+
})}
22+
isOpen
23+
onCrossClick={() => setOpen(false)}
24+
onClose={() => setOpen(false)}
25+
shouldCloseOnEsc
26+
shouldCloseOnOverlayClick
27+
>
28+
<div className="momentum-scroll" style={{ maxHeight: '80vh' }}>
29+
<QueryRenderer
30+
cacheConfig={{ force: true, poll: 30 * 1000 }}
31+
query={graphql`
32+
query DisruptionInfoQuery($feedIds: [String!]) {
33+
viewer {
34+
...DisruptionListContainer_viewer @arguments(feedIds: $feedIds)
3935
}
40-
`}
41-
variables={{ feedIds: context.config.feedIds }}
42-
environment={environment}
43-
render={({ props: innerProps }) =>
44-
innerProps ? (
45-
<>
46-
<h2>
47-
{intl.formatMessage({
48-
id: 'disruption-info',
49-
defaultMessage: 'Disruption info',
50-
})}
51-
</h2>
52-
<DisruptionListContainer
53-
onClickLink={() => setOpen(false)}
54-
{...innerProps}
55-
/>
56-
</>
57-
) : (
58-
<Loading />
59-
)
6036
}
61-
/>
62-
</div>
63-
</Modal>
64-
</Suspense>
37+
`}
38+
variables={{ feedIds: context.config.feedIds }}
39+
environment={environment}
40+
render={({ props: innerProps }) =>
41+
innerProps ? (
42+
<>
43+
<h2>
44+
{intl.formatMessage({
45+
id: 'disruption-info',
46+
defaultMessage: 'Disruption info',
47+
})}
48+
</h2>
49+
<DisruptionListContainer
50+
onClickLink={() => setOpen(false)}
51+
{...innerProps}
52+
/>
53+
</>
54+
) : (
55+
<Loading />
56+
)
57+
}
58+
/>
59+
</div>
60+
</Modal>
6561
);
6662
}
6763

‎app/component/MainMenuContainer.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import PropTypes from 'prop-types';
2-
import React, { Suspense, lazy } from 'react';
3-
4-
const MenuDrawer = lazy(() => import('./MenuDrawer'));
5-
const MainMenu = lazy(() => import('./MainMenu'));
2+
import React from 'react';
3+
import MenuDrawer from './MenuDrawer';
4+
import MainMenu from './MainMenu';
65

76
export default function MainMenuContainer({ breakpoint, closeMenu, ...rest }) {
87
return (
9-
<Suspense fallback="">
10-
<MenuDrawer open onRequestChange={closeMenu} breakpoint={breakpoint}>
11-
<MainMenu closeMenu={closeMenu} {...rest} />
12-
</MenuDrawer>
13-
</Suspense>
8+
<MenuDrawer open onRequestChange={closeMenu} breakpoint={breakpoint}>
9+
<MainMenu closeMenu={closeMenu} {...rest} />
10+
</MenuDrawer>
1411
);
1512
}
1613

‎app/component/itinerary/ItineraryPageContainer.js‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import React, { lazy, Suspense } from 'react';
1+
import React from 'react';
22
import { ReactRelayContext } from 'react-relay';
33
import { connectToStores } from 'fluxible-addons-react';
4-
import Loading from '../Loading';
54
import withBreakpoint from '../../util/withBreakpoint';
65
import { getMapLayerOptions } from '../../util/mapLayerUtils';
7-
8-
const ItineraryPage = lazy(() => import('./ItineraryPage'));
6+
import ItineraryPage from './ItineraryPage';
97

108
const ItineraryPageWithBreakpoint = withBreakpoint(props => (
119
<ReactRelayContext.Consumer>
@@ -30,9 +28,5 @@ const ItineraryPageWithStores = connectToStores(
3028
);
3129

3230
export default function ItineraryPageContainer(props) {
33-
return (
34-
<Suspense fallback={<Loading />}>
35-
<ItineraryPageWithStores {...props} />
36-
</Suspense>
37-
);
31+
return <ItineraryPageWithStores {...props} />;
3832
}

0 commit comments

Comments
 (0)