⚡ [#76] Lazy load appointment routes/components

Most forms won't need this code, so we can lazy load it instead.

src/components/appointments/CreateAppointment/CreateAppointment.spec.jsx

@@ -92,7 +92,7 @@ describe('Create appointment session expiration', () => {
     });
 
     // select a product
-    const dropdowns = screen.getAllByRole('combobox');
+    const dropdowns = await screen.findAllByRole('combobox');
     expect(dropdowns).toHaveLength(1);
     await user.click(dropdowns[0]);
     await user.keyboard('[ArrowDown]');

src/components/appointments/CreateAppointment/CreateAppointment.stories.jsx

@@ -7,7 +7,7 @@ import {buildForm} from 'api-mocks';
 import {mockSubmissionPost, mockSubmissionProcessingStatusGet} from 'api-mocks/submissions';
 import {loadCalendarLocale} from 'components/forms/DateField/DatePickerCalendar';
 import {FUTURE_FLAGS, PROVIDER_FUTURE_FLAGS} from 'routes';
-import {createAppointmentRoutes} from 'routes/appointments';
+import routes from 'routes';
 import {ConfigDecorator, LayoutDecorator} from 'story-utils/decorators';
 
 import {
@@ -47,21 +47,8 @@ export default {
 };
 
 const Wrapper = ({form}) => {
-  const routes = [
-    {
-      path: '/appointments',
-      children: [
-        {
-          path: '*',
-          element: <CreateAppointment />,
-          children: createAppointmentRoutes,
-        },
-      ],
-    },
-  ];
   const router = createMemoryRouter(routes, {
-    initialEntries: ['/appointments/'],
-    initialIndex: 0,
+    initialEntries: ['/afspraak-maken/'],
     future: FUTURE_FLAGS,
   });
   return (

src/components/appointments/CreateAppointment/LandingPage.jsx

@@ -0,0 +1,17 @@
+import {Navigate, useSearchParams} from 'react-router-dom';
+
+import {APPOINTMENT_STEP_PATHS} from './steps';
+
+// TODO: replace with loader that redirects at the route level
+export const LandingPage = () => {
+  const [params] = useSearchParams();
+  return (
+    <Navigate
+      replace
+      to={{
+        pathname: APPOINTMENT_STEP_PATHS[0],
+        search: `?${params}`,
+      }}
+    />
+  );
+};

src/components/appointments/CreateAppointment/steps.jsx

@@ -1,28 +1,22 @@
 import {defineMessage} from 'react-intl';
-import {Navigate, useSearchParams} from 'react-router';
-
-import {ChooseProductStep, ContactDetailsStep, LocationAndTimeStep} from '../steps';
 
 export const APPOINTMENT_STEPS = [
   {
     path: 'producten',
-    element: <ChooseProductStep navigateTo="../kalender" />,
     name: defineMessage({
       description: "Appointments navbar title for 'products' step",
       defaultMessage: 'Product',
     }),
   },
   {
     path: 'kalender',
-    element: <LocationAndTimeStep navigateTo="../contactgegevens" />,
     name: defineMessage({
       description: "Appointments navbar title for 'location and time' step",
       defaultMessage: 'Location and time',
     }),
   },
   {
     path: 'contactgegevens',
-    element: <ContactDetailsStep navigateTo="../overzicht" />,
     name: defineMessage({
       description: "Appointments navbar title for 'contact details' step",
       defaultMessage: 'Contact details',
@@ -31,17 +25,3 @@ export const APPOINTMENT_STEPS = [
 ];
 
 export const APPOINTMENT_STEP_PATHS = APPOINTMENT_STEPS.map(s => s.path);
-
-// TODO: replace with loader that redirects at the route level
-export const LandingPage = () => {
-  const [params] = useSearchParams();
-  return (
-    <Navigate
-      replace
-      to={{
-        pathname: APPOINTMENT_STEP_PATHS[0],
-        search: `?${params}`,
-      }}
-    />
-  );
-};

src/components/appointments/cancel/CancelAppointment.integration.spec.jsx

@@ -43,7 +43,7 @@ describe('Cancelling an appointment', () => {
   it('renders the correct page for a cancel route', async () => {
     render(<Wrapper />);
 
-    const textbox = screen.getByRole('textbox', {name: 'Your email address'});
+    const textbox = await screen.findByRole('textbox', {name: 'Your email address'});
     expect(textbox).toBeVisible();
     expect(textbox.name).toBe('email');
     expect(screen.getByRole('button')).toBeVisible();

src/components/appointments/index.jsx

@@ -1 +1,21 @@
-export {default as CreateAppointment} from './CreateAppointment';
+/**
+ * This module acts as the (lazy loaded) entry point for the appointments chunk.
+ */
+import CreateAppointment from './CreateAppointment';
+import Confirmation from './CreateAppointment/Confirmation';
+import {LandingPage} from './CreateAppointment/LandingPage';
+import Summary from './CreateAppointment/Summary';
+import {CancelAppointment, CancelAppointmentSuccess} from './cancel';
+import {ChooseProductStep, ContactDetailsStep, LocationAndTimeStep} from './steps';
+
+export {
+  CreateAppointment,
+  Confirmation,
+  LandingPage,
+  Summary,
+  CancelAppointment,
+  CancelAppointmentSuccess,
+  ChooseProductStep,
+  ContactDetailsStep,
+  LocationAndTimeStep,
+};

src/routes/app.jsx

@@ -3,9 +3,8 @@ import {Cosign} from 'components/CoSign';
 import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import Form from 'components/Form';
 import SessionExpired from 'components/Sessions/SessionExpired';
-import {CreateAppointment} from 'components/appointments';
 
-import {createAppointmentRoutes, manageAppointmentRoutes} from './appointments';
+import appointmentRoutes from './appointments';
 import cosignRoutes from './cosign';
 import formRoutes from './form';
 
@@ -24,33 +23,9 @@ const routes = [
     element: <App />,
     children: [
       {
-        path: 'afspraak-annuleren',
-        children: [
-          {
-            path: '*',
-            children: manageAppointmentRoutes,
-          },
-        ],
-      },
-      {
-        path: 'afspraak-maken',
-        children: [
-          {
-            path: '*',
-            element: <CreateAppointment />,
-            children: createAppointmentRoutes,
-          },
-        ],
-      },
-      {
-        path: 'cosign',
-        children: [
-          {
-            path: '*',
-            element: <Cosign />,
-            children: cosignRoutes,
-          },
-        ],
+        path: 'cosign/*',
+        element: <Cosign />,
+        children: cosignRoutes,
       },
       {
         path: 'sessie-verlopen',
@@ -60,6 +35,11 @@ const routes = [
           </ErrorBoundary>
         ),
       },
+      // appointments splat
+      {
+        path: '*',
+        children: appointmentRoutes,
+      },
       // All the rest goes to the formio-based form flow
       {
         path: '*',

src/routes/appointments.jsx

@@ -1,41 +1,99 @@
 import ErrorBoundary from 'components/Errors/ErrorBoundary';
-import Confirmation from 'components/appointments/CreateAppointment/Confirmation';
-import Summary from 'components/appointments/CreateAppointment/Summary';
-import {APPOINTMENT_STEPS, LandingPage} from 'components/appointments/CreateAppointment/steps';
-import {CancelAppointment, CancelAppointmentSuccess} from 'components/appointments/cancel';
 
 /**
  * Route subtree for appointment forms.
  */
 const createAppointmentRoutes = [
   {
     path: '',
-    element: <LandingPage />,
+    lazy: async () => {
+      const {LandingPage} = await import('components/appointments');
+      return {element: <LandingPage />};
+    },
+  },
+  {
+    path: 'producten',
+    lazy: async () => {
+      const {ChooseProductStep} = await import('components/appointments');
+      return {element: <ChooseProductStep navigateTo="../kalender" />};
+    },
+  },
+  {
+    path: 'kalender',
+    lazy: async () => {
+      const {LocationAndTimeStep} = await import('components/appointments');
+      return {element: <LocationAndTimeStep navigateTo="../contactgegevens" />};
+    },
+  },
+  {
+    path: 'contactgegevens',
+    lazy: async () => {
+      const {ContactDetailsStep} = await import('components/appointments');
+      return {element: <ContactDetailsStep navigateTo="../overzicht" />};
+    },
   },
-  ...APPOINTMENT_STEPS.map(({path, element}) => ({path, element})),
   {
     path: 'overzicht',
-    element: <Summary />,
+    lazy: async () => {
+      const {Summary} = await import('components/appointments');
+      return {element: <Summary />};
+    },
   },
   {
     path: 'bevestiging',
-    element: <Confirmation />,
+    lazy: async () => {
+      const {Confirmation} = await import('components/appointments');
+      return {element: <Confirmation />};
+    },
   },
 ];
 
 const manageAppointmentRoutes = [
   {
     path: '',
-    element: (
-      <ErrorBoundary>
-        <CancelAppointment />
-      </ErrorBoundary>
-    ),
+    lazy: async () => {
+      const {CancelAppointment} = await import('components/appointments');
+      return {
+        element: (
+          <ErrorBoundary>
+            <CancelAppointment />
+          </ErrorBoundary>
+        ),
+      };
+    },
   },
   {
     path: 'succes',
-    element: <CancelAppointmentSuccess />,
+    lazy: async () => {
+      const {CancelAppointmentSuccess} = await import('components/appointments');
+      return {element: <CancelAppointmentSuccess />};
+    },
+  },
+];
+
+const appointmentRoutes = [
+  {
+    path: 'afspraak-annuleren',
+    children: [
+      {
+        path: '*',
+        children: manageAppointmentRoutes,
+      },
+    ],
+  },
+  {
+    path: 'afspraak-maken',
+    children: [
+      {
+        path: '*',
+        children: createAppointmentRoutes,
+        lazy: async () => {
+          const {CreateAppointment} = await import('components/appointments');
+          return {element: <CreateAppointment />};
+        },
+      },
+    ],
   },
 ];
 
-export {createAppointmentRoutes, manageAppointmentRoutes};
+export default appointmentRoutes;