perf: cache app store imports (#19519)

* perf: Cache app store imports

* Added a console log to see when imports happen

* Discard changes to yarn.lock

---------

Co-authored-by: Omar López <zomars@me.com>

packages/app-store/index.ts

@@ -1,57 +1,67 @@
 const appStore = {
-  // example: () => import("./example"),
-  alby: () => import("./alby"),
-  applecalendar: () => import("./applecalendar"),
-  aroundvideo: () => import("./around"),
-  caldavcalendar: () => import("./caldavcalendar"),
-  campsiteconferencing: () => import("./campsite"),
-  closecom: () => import("./closecom"),
-  dailyvideo: () => import("./dailyvideo"),
-  googlecalendar: () => import("./googlecalendar"),
-  googlevideo: () => import("./googlevideo"),
-  hubspot: () => import("./hubspot"),
-  huddle01video: () => import("./huddle01video"),
-  "ics-feedcalendar": () => import("./ics-feedcalendar"),
-  jellyconferencing: () => import("./jelly"),
-  jitsivideo: () => import("./jitsivideo"),
-  larkcalendar: () => import("./larkcalendar"),
-  nextcloudtalkvideo: () => import("./nextcloudtalk"),
-  office365calendar: () => import("./office365calendar"),
-  office365video: () => import("./office365video"),
-  plausible: () => import("./plausible"),
-  paypal: () => import("./paypal"),
-  "pipedrive-crm": () => import("./pipedrive-crm"),
-  salesforce: () => import("./salesforce"),
-  zohocrm: () => import("./zohocrm"),
-  sendgrid: () => import("./sendgrid"),
-  stripepayment: () => import("./stripepayment"),
-  tandemvideo: () => import("./tandemvideo"),
-  vital: () => import("./vital"),
-  zoomvideo: () => import("./zoomvideo"),
-  wipemycalother: () => import("./wipemycalother"),
-  webexvideo: () => import("./webex"),
-  giphy: () => import("./giphy"),
-  zapier: () => import("./zapier"),
-  make: () => import("./make"),
-  exchange2013calendar: () => import("./exchange2013calendar"),
-  exchange2016calendar: () => import("./exchange2016calendar"),
-  exchangecalendar: () => import("./exchangecalendar"),
-  facetime: () => import("./facetime"),
-  sylapsvideo: () => import("./sylapsvideo"),
-  zohocalendar: () => import("./zohocalendar"),
-  "zoho-bigin": () => import("./zoho-bigin"),
-  basecamp3: () => import("./basecamp3"),
-  telegramvideo: () => import("./telegram"),
-  shimmervideo: () => import("./shimmervideo"),
-  hitpay: () => import("./hitpay"),
+  alby: createCachedImport(() => import("./alby")),
+  applecalendar: createCachedImport(() => import("./applecalendar")),
+  aroundvideo: createCachedImport(() => import("./around")),
+  caldavcalendar: createCachedImport(() => import("./caldavcalendar")),
+  campsiteconferencing: createCachedImport(() => import("./campsite")),
+  closecom: createCachedImport(() => import("./closecom")),
+  dailyvideo: createCachedImport(() => import("./dailyvideo")),
+  googlecalendar: createCachedImport(() => import("./googlecalendar")),
+  googlevideo: createCachedImport(() => import("./googlevideo")),
+  hubspot: createCachedImport(() => import("./hubspot")),
+  huddle01video: createCachedImport(() => import("./huddle01video")),
+  "ics-feedcalendar": createCachedImport(() => import("./ics-feedcalendar")),
+  jellyconferencing: createCachedImport(() => import("./jelly")),
+  jitsivideo: createCachedImport(() => import("./jitsivideo")),
+  larkcalendar: createCachedImport(() => import("./larkcalendar")),
+  nextcloudtalkvideo: createCachedImport(() => import("./nextcloudtalk")),
+  office365calendar: createCachedImport(() => import("./office365calendar")),
+  office365video: createCachedImport(() => import("./office365video")),
+  plausible: createCachedImport(() => import("./plausible")),
+  paypal: createCachedImport(() => import("./paypal")),
+  "pipedrive-crm": createCachedImport(() => import("./pipedrive-crm")),
+  salesforce: createCachedImport(() => import("./salesforce")),
+  zohocrm: createCachedImport(() => import("./zohocrm")),
+  sendgrid: createCachedImport(() => import("./sendgrid")),
+  stripepayment: createCachedImport(() => import("./stripepayment")),
+  tandemvideo: createCachedImport(() => import("./tandemvideo")),
+  vital: createCachedImport(() => import("./vital")),
+  zoomvideo: createCachedImport(() => import("./zoomvideo")),
+  wipemycalother: createCachedImport(() => import("./wipemycalother")),
+  webexvideo: createCachedImport(() => import("./webex")),
+  giphy: createCachedImport(() => import("./giphy")),
+  zapier: createCachedImport(() => import("./zapier")),
+  make: createCachedImport(() => import("./make")),
+  exchange2013calendar: createCachedImport(() => import("./exchange2013calendar")),
+  exchange2016calendar: createCachedImport(() => import("./exchange2016calendar")),
+  exchangecalendar: createCachedImport(() => import("./exchangecalendar")),
+  facetime: createCachedImport(() => import("./facetime")),
+  sylapsvideo: createCachedImport(() => import("./sylapsvideo")),
+  zohocalendar: createCachedImport(() => import("./zohocalendar")),
+  "zoho-bigin": createCachedImport(() => import("./zoho-bigin")),
+  basecamp3: createCachedImport(() => import("./basecamp3")),
+  telegramvideo: createCachedImport(() => import("./telegram")),
+  shimmervideo: createCachedImport(() => import("./shimmervideo")),
+  hitpay: createCachedImport(() => import("./hitpay")),
 };
 
+function createCachedImport<T>(importFunc: () => Promise<T>): () => Promise<T> {
+  let cachedModule: T | undefined;
+
+  return async () => {
+    if (!cachedModule) {
+      cachedModule = await importFunc();
+    }
+    return cachedModule;
+  };
+}
+
 const exportedAppStore: typeof appStore & {
   ["mock-payment-app"]?: () => Promise<typeof import("./mock-payment-app/index")>;
 } = appStore;
 
 if (process.env.MOCK_PAYMENT_APP_ENABLED !== undefined) {
-  exportedAppStore["mock-payment-app"] = () => import("./mock-payment-app/index");
+  exportedAppStore["mock-payment-app"] = createCachedImport(() => import("./mock-payment-app/index"));
 }
 
 export default exportedAppStore;