diff --git a/lib/components/util/with-suspense.tsx b/lib/components/util/with-suspense.tsx new file mode 100644 index 000000000..7da9f3929 --- /dev/null +++ b/lib/components/util/with-suspense.tsx @@ -0,0 +1,16 @@ +import React, { ComponentType, Suspense } from 'react' + +/** + * Wraps a component with suspense, assuming the wrapped component is lazily loaded. + */ +export default function withSuspense( + WrappedComponent: ComponentType +): ComponentType { + const suspensedComponent = (props: T): JSX.Element => ( + }> + + + ) + + return suspensedComponent +} diff --git a/lib/util/webapp-print-routes.js b/lib/util/webapp-print-routes.js index f5a97349c..69f4617f7 100644 --- a/lib/util/webapp-print-routes.js +++ b/lib/util/webapp-print-routes.js @@ -1,5 +1,12 @@ -import PrintFieldTripLayout from '../components/admin/print-field-trip-layout' -import PrintLayout from '../components/app/print-layout' +import { lazy } from 'react' + +import withSuspense from '../components/util/with-suspense' + +const PrintLayout = lazy(() => import('../components/app/print-layout')) + +const PrintFieldTripLayout = lazy(() => + import('../components/admin/print-field-trip-layout') +) /** * Contains mapping of the component(s) to display for each URL printing route. @@ -11,12 +18,12 @@ import PrintLayout from '../components/app/print-layout' const routes = [ { a11yIgnore: true, - component: PrintLayout, + component: withSuspense(PrintLayout), path: '/print' }, { a11yIgnore: true, - component: PrintFieldTripLayout, + component: withSuspense(PrintFieldTripLayout), path: '/printFieldTrip' } ] diff --git a/lib/util/webapp-routes.js b/lib/util/webapp-routes.js index a76508043..19c035835 100644 --- a/lib/util/webapp-routes.js +++ b/lib/util/webapp-routes.js @@ -1,9 +1,9 @@ -import React, { lazy, Suspense } from 'react' +import React, { lazy } from 'react' import { frame } from '../components/app/app-frame' import AfterSignInScreen from '../components/user/after-signin-screen' import RedirectWithQuery from '../components/form/redirect-with-query' -import SavedTripList from '../components/user/monitored-trip/saved-trip-list' +import withSuspense from '../components/util/with-suspense' import { ACCOUNT_PATH, @@ -27,6 +27,9 @@ const UserAccountScreen = lazy(() => const FavoritePlaceScreen = lazy(() => import('../components/user/places/favorite-place-screen') ) +const SavedTripList = lazy(() => + import('../components/user/monitored-trip/saved-trip-list') +) /** * Contains mapping of the component(s) to display for each URL route. @@ -64,20 +67,12 @@ const routes = [ }, { a11yIgnore: true, - component: (props) => ( - }> - - - ), + component: withSuspense(FavoritePlaceScreen), path: [`${CREATE_ACCOUNT_PLACES_PATH}/:id`, `${PLACES_PATH}/:id`] }, { a11yIgnore: true, - component: (props) => ( - }> - - - ), + component: withSuspense(SavedTripScreen), path: `${TRIPS_PATH}/:id` }, { @@ -95,11 +90,7 @@ const routes = [ { a11yIgnore: true, // This route lets new or existing users edit or set up their account. - component: (props) => ( - }> - - - ), + component: withSuspense(UserAccountScreen), path: [ `${CREATE_ACCOUNT_PATH}/:step`, `${MOBILITY_PATH}/:step`, @@ -117,7 +108,7 @@ const routes = [ }, { a11yIgnore: true, - component: SavedTripList, + component: withSuspense(SavedTripList), path: TRIPS_PATH }, { diff --git a/lib/util/webapp-trip-preview-routes.js b/lib/util/webapp-trip-preview-routes.js index 004fd1767..8ece296ff 100644 --- a/lib/util/webapp-trip-preview-routes.js +++ b/lib/util/webapp-trip-preview-routes.js @@ -1,4 +1,10 @@ -import TripPreviewLayout from '../components/app/trip-preview-layout' +import { lazy } from 'react' + +import withSuspense from '../components/util/with-suspense' + +const TripPreviewLayout = lazy(() => + import('../components/app/trip-preview-layout') +) /** * Contains mapping of the component(s) to display for the trip preview URL. @@ -10,7 +16,7 @@ import TripPreviewLayout from '../components/app/trip-preview-layout' const routes = [ { a11yIgnore: true, - component: TripPreviewLayout, + component: withSuspense(TripPreviewLayout), path: '/previewtrip/:id' } ]