Merge branch 'dev' into remove-companion-update-toast

opentripplanner · Jan 6, 2025 · adb88a9 · adb88a9
2 parents e1eba1f + abd4067
commit adb88a9
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 24 deletions.
diff --git a/lib/components/util/with-suspense.tsx 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<T>(
+  WrappedComponent: ComponentType<T>
+): ComponentType<T> {
+  const suspensedComponent = (props: T): JSX.Element => (
+    <Suspense fallback={<span />}>
+      <WrappedComponent {...props} />
+    </Suspense>
+  )
+
+  return suspensedComponent
+}
diff --git 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
@@ -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) => (
-      <Suspense fallback={<span />}>
-        <FavoritePlaceScreen {...props} />
-      </Suspense>
-    ),
+    component: withSuspense(FavoritePlaceScreen),
     path: [`${CREATE_ACCOUNT_PLACES_PATH}/:id`, `${PLACES_PATH}/:id`]
   },
   {
     a11yIgnore: true,
-    component: (props) => (
-      <Suspense fallback={<span />}>
-        <SavedTripScreen {...props} />
-      </Suspense>
-    ),
+    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) => (
-      <Suspense fallback={<span />}>
-        <UserAccountScreen {...props} />
-      </Suspense>
-    ),
+    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
@@ -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'
   }
 ]