(fix) Make appointments app lazy-load anything in the chart (#1314)

* (fix) Make appointments app lazy-load anything in the chart * Fixup some component names --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Sep 9, 2024 · e30bfe3 · e30bfe3
1 parent 07d0432
commit e30bfe3
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 416 deletions.
diff --git a/packages/esm-appointments-app/src/index.ts b/packages/esm-appointments-app/src/index.ts
@@ -7,7 +7,6 @@ import {
 } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 import { createDashboardLink } from './createDashboardLink.component';
-import { createDashboardLink as createPatientChartDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { dashboardMeta, appointmentCalendarDashboardMeta, patientChartDashboardMeta } from './dashboard.meta';
 import {
   cancelledAppointmentsPanelConfigSchema,
@@ -22,10 +21,7 @@ import appointmentsDashboardComponent from './appointments.component';
 import homeAppointmentsComponent from './home/home-appointments.component';
 import appointmentsListComponent from './appointments/scheduled/appointments-list.component';
 import earlyAppointmentsComponent from './appointments/scheduled/early-appointments.component';
-import patientAppointmentsDetailedSummaryComponent from './patient-appointments/patient-appointments-detailed-summary.component';
-import patientAppointmentsOverviewComponent from './patient-appointments/patient-appointments-overview.component';
-import patientUpcomingAppointmentsComponent from './patient-appointments/patient-upcoming-appointments-card.component';
-import appointementsForm from './form/appointments-form.component';
+import appointmentsFormComponent from './form/appointments-form.component';
 import patientSearch from './patient-search/patient-search.component';
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -79,24 +75,30 @@ export const appointmentsList = getSyncLifecycle(appointmentsListComponent, opti
 
 export const earlyAppointments = getSyncLifecycle(earlyAppointmentsComponent, options);
 
-export const appointementForm = getSyncLifecycle(appointementsForm, options);
+export const appointmentsForm = getSyncLifecycle(appointmentsFormComponent, options);
 
 export const searchPatient = getSyncLifecycle(patientSearch, options);
 
 // t('Appointments', 'Appointments')
-export const patientAppointmentsSummaryDashboardLink = getSyncLifecycle(
-  createPatientChartDashboardLink({ ...patientChartDashboardMeta, moduleName }),
+export const patientAppointmentsSummaryDashboardLink = getAsyncLifecycle(async () => {
+  const commonLib = await import('@openmrs/esm-patient-common-lib');
+  return { default: commonLib.createDashboardLink({ ...patientChartDashboardMeta, moduleName }) };
+}, options);
+
+export const patientAppointmentsDetailedSummary = getAsyncLifecycle(
+  () => import('./patient-appointments/patient-appointments-detailed-summary.component'),
   options,
 );
 
-export const patientAppointmentsDetailedSummary = getSyncLifecycle(
-  patientAppointmentsDetailedSummaryComponent,
+export const patientAppointmentsOverview = getAsyncLifecycle(
+  () => import('./patient-appointments/patient-appointments-overview.component'),
   options,
 );
 
-export const patientAppointmentsOverview = getSyncLifecycle(patientAppointmentsOverviewComponent, options);
-
-export const patientUpcomingAppointmentsWidget = getSyncLifecycle(patientUpcomingAppointmentsComponent, options);
+export const patientUpcomingAppointmentsWidget = getAsyncLifecycle(
+  () => import('./patient-appointments/patient-upcoming-appointments-card.component'),
+  options,
+);
 
 export const patientAppointmentsCancelConfirmationDialog = getAsyncLifecycle(
   () => import('./patient-appointments/patient-appointments-cancel.modal'),

diff --git a/packages/esm-appointments-app/src/routes.json b/packages/esm-appointments-app/src/routes.json
@@ -117,7 +117,7 @@
     },
     {
       "name": "edit-appointments-form",
-      "component": "appointementForm",
+      "component": "appointmentsForm",
       "meta": {
         "title":{
           "key":"editAppointment",
@@ -131,7 +131,7 @@
    },
     {
       "name": "create-appointment",
-      "component": "appointementForm",
+      "component": "appointmentsForm",
       "meta": {
         "title": {
           "key":"appointmentForm",
@@ -141,7 +141,7 @@
     },
     {
       "name": "add-appointment",
-      "component": "appointementForm",
+      "component": "appointmentsForm",
       "meta": {
         "title": {
           "key": "createNewAppointment",