Utilize React-Lazy for Code Splitting (#20605)

* Top level lazy loading

* Lazyloading for Datepicker

* Cleanup export

* Better datepicker lazy loading

* Sources routes lazy loaded

* More connection page optimization

* Cloud pass

* Joseph code review

airbyte-webapp/src/components/ui/DatePicker/DatePicker.tsx

@@ -162,3 +162,5 @@ export const DatePicker: React.FC<DatePickerProps> = ({
     </div>
   );
 };
+
+export default DatePicker;

airbyte-webapp/src/components/ui/DatePicker/index.ts

@@ -1 +1 @@
-export { DatePicker } from "./DatePicker";
+export { DatePicker as default } from "./DatePicker";

airbyte-webapp/src/packages/cloud/cloudRoutes.tsx

@@ -10,19 +10,6 @@ import { FeatureItem, FeatureSet, useFeatureService } from "hooks/services/Featu
 import { useApiHealthPoll } from "hooks/services/Health";
 import { useQuery } from "hooks/useQuery";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
-import { Auth } from "packages/cloud/views/auth";
-import { CreditsPage } from "packages/cloud/views/credits";
-import MainView from "packages/cloud/views/layout/MainView";
-import { WorkspacesPage } from "packages/cloud/views/workspaces";
-import ConnectionPage from "pages/ConnectionPage";
-import CreationFormPage from "pages/ConnectionPage/pages/CreationFormPage";
-import { AllDestinationsPage } from "pages/destination/AllDestinationsPage";
-import CreateDestinationPage from "pages/destination/CreateDestinationPage";
-import { DestinationItemPage } from "pages/destination/DestinationItemPage";
-import { DestinationOverviewPage } from "pages/destination/DestinationOverviewPage";
-import { DestinationSettingsPage } from "pages/destination/DestinationSettingsPage";
-import SourcesPage from "pages/SourcesPage";
-import { SpeakeasyRedirectPage } from "pages/SpeakeasyRedirectPage";
 import { useCurrentWorkspace, WorkspaceServiceProvider } from "services/workspaces/WorkspacesService";
 import { setSegmentAnonymousId, useGetSegmentAnonymousId } from "utils/crossDomainUtils";
 import { storeUtmFromQuery } from "utils/utmStorage";
@@ -32,9 +19,7 @@ import { RoutePaths, DestinationPaths } from "../../pages/routePaths";
 import { CreditStatus } from "./lib/domain/cloudWorkspaces/types";
 import { LDExperimentServiceProvider } from "./services/thirdParty/launchdarkly";
 import { useGetCloudWorkspace } from "./services/workspaces/CloudWorkspacesService";
-import { DefaultView } from "./views/DefaultView";
 import { VerifyEmailAction } from "./views/FirebaseActionRoute";
-import { CloudSettingsPage } from "./views/settings/CloudSettingsPage";
 
 export const CloudRoutes = {
   Root: "/",
@@ -56,6 +41,24 @@ export const CloudRoutes = {
   FirebaseAction: "/verify-email",
 } as const;
 
+const MainView = React.lazy(() => import("packages/cloud/views/layout/MainView"));
+const WorkspacesPage = React.lazy(() => import("packages/cloud/views/workspaces"));
+const Auth = React.lazy(() => import("packages/cloud/views/auth"));
+const CreditsPage = React.lazy(() => import("packages/cloud/views/credits"));
+
+const ConnectionPage = React.lazy(() => import("pages/ConnectionPage"));
+const CreationFormPage = React.lazy(() => import("pages/ConnectionPage/pages/CreationFormPage"));
+const AllDestinationsPage = React.lazy(() => import("pages/destination/AllDestinationsPage"));
+const CreateDestinationPage = React.lazy(() => import("pages/destination/CreateDestinationPage"));
+const DestinationItemPage = React.lazy(() => import("pages/destination/DestinationItemPage"));
+const DestinationOverviewPage = React.lazy(() => import("pages/destination/DestinationOverviewPage"));
+const DestinationSettingsPage = React.lazy(() => import("pages/destination/DestinationSettingsPage"));
+const SourcesPage = React.lazy(() => import("pages/SourcesPage"));
+const SpeakeasyRedirectPage = React.lazy(() => import("pages/SpeakeasyRedirectPage"));
+
+const CloudSettingsPage = React.lazy(() => import("./views/settings/CloudSettingsPage"));
+const DefaultView = React.lazy(() => import("./views/DefaultView"));
+
 const MainRoutes: React.FC = () => {
   const { setWorkspaceFeatures } = useFeatureService();
   const workspace = useCurrentWorkspace();

airbyte-webapp/src/packages/cloud/views/AcceptEmailInvite.tsx

@@ -94,3 +94,5 @@ export const AcceptEmailInvite: React.FC = () => {
     </>
   );
 };
+
+export default AcceptEmailInvite;

airbyte-webapp/src/packages/cloud/views/DefaultView.tsx

@@ -36,3 +36,5 @@ export const DefaultView: React.FC = () => {
     />
   );
 };
+
+export default DefaultView;

airbyte-webapp/src/packages/cloud/views/FirebaseActionRoute.tsx

@@ -3,7 +3,6 @@ import { useIntl } from "react-intl";
 import { Navigate, useNavigate } from "react-router-dom";
 import { useAsync } from "react-use";
 
-import LoadingPage from "components/LoadingPage";
 import { ToastType } from "components/ui/Toast";
 
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
@@ -12,8 +11,10 @@ import { useQuery } from "hooks/useQuery";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 
 import { CloudRoutes } from "../cloudRoutes";
-import { AcceptEmailInvite } from "./AcceptEmailInvite";
-import { ResetPasswordConfirmPage } from "./auth/ConfirmPasswordResetPage";
+
+const AcceptEmailInvite = React.lazy(() => import("./AcceptEmailInvite"));
+const ResetPasswordConfirmPage = React.lazy(() => import("./auth/ConfirmPasswordResetPage"));
+const LoadingPage = React.lazy(() => import("components/LoadingPage"));
 
 export enum FirebaseActionMode {
   VERIFY_EMAIL = "verifyEmail",
@@ -53,7 +54,7 @@ export const VerifyEmailAction: React.FC = () => {
 };
 
 export const FirebaseActionRoute: React.FC = () => {
-  const { mode } = useQuery();
+  const { mode } = useQuery<{ mode: FirebaseActionMode }>();
 
   switch (mode) {
     case FirebaseActionMode.VERIFY_EMAIL:

airbyte-webapp/src/packages/cloud/views/auth/Auth.tsx

@@ -11,10 +11,11 @@ import { FirebaseActionRoute } from "packages/cloud/views/FirebaseActionRoute";
 
 import styles from "./Auth.module.scss";
 import FormContent from "./components/FormContent";
-import { PersonQuoteCover } from "./components/PersonQuoteCover";
-import { LoginPage } from "./LoginPage";
-import { ResetPasswordPage } from "./ResetPasswordPage";
-import { SignupPage } from "./SignupPage";
+
+const PersonQuoteCover = React.lazy(() => import("./components/PersonQuoteCover"));
+const LoginPage = React.lazy(() => import("./LoginPage"));
+const ResetPasswordPage = React.lazy(() => import("./ResetPasswordPage"));
+const SignupPage = React.lazy(() => import("./SignupPage"));
 
 const hasValidRightSideUrl = (url?: string): boolean => {
   if (url) {
@@ -33,7 +34,7 @@ const hasValidRightSideUrl = (url?: string): boolean => {
   return false;
 };
 
-const Auth: React.FC = () => {
+export const Auth: React.FC = () => {
   const { pathname } = useLocation();
   const { formatMessage } = useIntl();
   const { loggedOut } = useAuthService();
@@ -74,5 +75,3 @@ const Auth: React.FC = () => {
     </div>
   );
 };
-
-export default Auth;

airbyte-webapp/src/packages/cloud/views/auth/ConfirmPasswordResetPage/index.tsx

@@ -1 +1,5 @@
+import { ResetPasswordConfirmPage } from "./ConfirmPasswordResetPage";
+
 export * from "./ConfirmPasswordResetPage";
+
+export default ResetPasswordConfirmPage;

airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx

@@ -26,7 +26,7 @@ const LoginPageValidationSchema = yup.object().shape({
   password: yup.string().required("form.empty.error"),
 });
 
-const LoginPage: React.FC = () => {
+export const LoginPage: React.FC = () => {
   const { formatMessage } = useIntl();
   const { login } = useAuthService();
   const query = useQuery<{ from?: string }>();
@@ -120,5 +120,3 @@ const LoginPage: React.FC = () => {
     </div>
   );
 };
-
-export default LoginPage;

airbyte-webapp/src/packages/cloud/views/auth/LoginPage/index.tsx

@@ -1,3 +1 @@
-import LoginPage from "./LoginPage";
-
-export { LoginPage };
+export { LoginPage as default } from "./LoginPage";

airbyte-webapp/src/packages/cloud/views/auth/ResetPasswordPage/index.tsx

@@ -1,3 +1,3 @@
 import ResetPasswordPage from "./ResetPasswordPage";
 
-export { ResetPasswordPage };
+export default ResetPasswordPage;

airbyte-webapp/src/packages/cloud/views/auth/SignupPage/index.tsx

@@ -1,3 +1,3 @@
 import SignupPage from "./SignupPage";
 
-export { SignupPage };
+export default SignupPage;

airbyte-webapp/src/packages/cloud/views/auth/components/PersonQuoteCover/index.tsx

@@ -1 +1,3 @@
-export { PersonQuoteCover } from "./PersonQuoteCover";
+import { PersonQuoteCover } from "./PersonQuoteCover";
+
+export default PersonQuoteCover;

airbyte-webapp/src/packages/cloud/views/auth/index.tsx

@@ -1,3 +1,3 @@
-import Auth from "./Auth";
+import { Auth } from "./Auth";
 
-export { Auth };
+export default Auth;

airbyte-webapp/src/packages/cloud/views/credits/index.tsx

@@ -1,3 +1,3 @@
 import CreditsPage from "./CreditsPage";
 
-export { CreditsPage };
+export default CreditsPage;

airbyte-webapp/src/packages/cloud/views/settings/CloudSettingsPage.tsx

@@ -118,3 +118,5 @@ export const CloudSettingsPage: React.FC = () => {
 
   return <SettingsPage pageConfig={pageConfig} />;
 };
+
+export default CloudSettingsPage;

airbyte-webapp/src/packages/cloud/views/workspaces/index.tsx

@@ -1,3 +1,3 @@
 import WorkspacesPage from "./WorkspacesPage";
 
-export { WorkspacesPage };
+export default WorkspacesPage;

airbyte-webapp/src/pages/ConnectionPage/ConnectionPage.tsx

@@ -7,9 +7,10 @@ import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundError
 import { StartOverErrorView } from "views/common/StartOverErrorView";
 
 import { RoutePaths } from "../routePaths";
-import AllConnectionsPage from "./pages/AllConnectionsPage";
-import { ConnectionItemPage } from "./pages/ConnectionItemPage/ConnectionItemPage";
-import { CreationFormPage } from "./pages/CreationFormPage/CreationFormPage";
+
+const CreationFormPage = React.lazy(() => import("./pages/CreationFormPage/CreationFormPage"));
+const ConnectionItemPage = React.lazy(() => import("./pages/ConnectionItemPage/ConnectionItemPage"));
+const AllConnectionsPage = React.lazy(() => import("./pages/AllConnectionsPage"));
 
 export const ConnectionPage: React.FC = () => (
   <Suspense fallback={<LoadingPage />}>

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx

@@ -70,3 +70,5 @@ export const ConnectionItemPage = () => {
     </ConnectionEditServiceProvider>
   );
 };
+
+export default ConnectionItemPage;

airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx

@@ -250,3 +250,5 @@ export const CreationFormPage: React.FC = () => {
     </>
   );
 };
+
+export default CreationFormPage;

airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.tsx

@@ -73,3 +73,5 @@ export const ConnectorBuilderPage: React.FC = () => (
     <ConnectorBuilderPageInner />
   </ConnectorBuilderStateProvider>
 );
+
+export default ConnectorBuilderPage;

airbyte-webapp/src/pages/SourcesPage/SourcesPage.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 
-import { CreationFormPage } from "pages/ConnectionPage/pages/CreationFormPage/CreationFormPage";
 import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
 import { StartOverErrorView } from "views/common/StartOverErrorView";
 
 import { RoutePaths } from "../routePaths";
-import AllSourcesPage from "./pages/AllSourcesPage";
-import CreateSourcePage from "./pages/CreateSourcePage/CreateSourcePage";
-import SourceItemPage from "./pages/SourceItemPage";
+
+const AllSourcesPage = React.lazy(() => import("./pages/AllSourcesPage"));
+const CreateSourcePage = React.lazy(() => import("./pages/CreateSourcePage/CreateSourcePage"));
+const SourceItemPage = React.lazy(() => import("./pages/SourceItemPage"));
+const CreationFormPage = React.lazy(() => import("pages/ConnectionPage/pages/CreationFormPage/CreationFormPage"));
 
 export const SourcesPage: React.FC = () => (
   <Routes>

airbyte-webapp/src/pages/SpeakeasyRedirectPage/index.tsx

@@ -1 +1,3 @@
-export { SpeakeasyRedirectPage } from "./SpeakeasyRedirectPage";
+import { SpeakeasyRedirectPage } from "./SpeakeasyRedirectPage";
+
+export default SpeakeasyRedirectPage;

airbyte-webapp/src/pages/destination/AllDestinationsPage/index.tsx

@@ -1 +1 @@
-export { AllDestinationsPage } from "./AllDestinationsPage";
+export { AllDestinationsPage as default } from "./AllDestinationsPage";

airbyte-webapp/src/pages/destination/DestinationItemPage/index.tsx

@@ -1 +1 @@
-export { DestinationItemPage } from "./DestinationItemPage";
+export { DestinationItemPage as default } from "./DestinationItemPage";

airbyte-webapp/src/pages/destination/DestinationOverviewPage.tsx

@@ -75,3 +75,5 @@ export const DestinationOverviewPage = () => {
     </>
   );
 };
+
+export default DestinationOverviewPage;

airbyte-webapp/src/pages/destination/DestinationSettingsPage/index.ts

@@ -1 +1 @@
-export { DestinationSettingsPage } from "./DestinationSettingsPage";
+export { DestinationSettingsPage as default } from "./DestinationSettingsPage";

airbyte-webapp/src/pages/routes.tsx

@@ -13,18 +13,20 @@ import { CompleteOauthRequest } from "views/CompleteOauthRequest";
 import MainView from "views/layout/MainView";
 
 import { WorkspaceRead } from "../core/request/AirbyteClient";
-import ConnectionPage from "./ConnectionPage";
-import CreationFormPage from "./ConnectionPage/pages/CreationFormPage";
-import { ConnectorBuilderPage } from "./ConnectorBuilderPage/ConnectorBuilderPage";
-import { AllDestinationsPage } from "./destination/AllDestinationsPage";
-import CreateDestinationPage from "./destination/CreateDestinationPage";
-import { DestinationItemPage } from "./destination/DestinationItemPage";
-import { DestinationOverviewPage } from "./destination/DestinationOverviewPage";
-import { DestinationSettingsPage } from "./destination/DestinationSettingsPage";
-import PreferencesPage from "./PreferencesPage";
 import { RoutePaths, DestinationPaths } from "./routePaths";
-import SettingsPage from "./SettingsPage";
-import SourcesPage from "./SourcesPage";
+
+const ConnectionPage = React.lazy(() => import("./ConnectionPage"));
+const CreationFormPage = React.lazy(() => import("./ConnectionPage/pages/CreationFormPage"));
+const ConnectorBuilderPage = React.lazy(() => import("./ConnectorBuilderPage/ConnectorBuilderPage"));
+
+const AllDestinationsPage = React.lazy(() => import("./destination/AllDestinationsPage"));
+const CreateDestinationPage = React.lazy(() => import("./destination/CreateDestinationPage"));
+const DestinationItemPage = React.lazy(() => import("./destination/DestinationItemPage"));
+const DestinationOverviewPage = React.lazy(() => import("./destination/DestinationOverviewPage"));
+const DestinationSettingsPage = React.lazy(() => import("./destination/DestinationSettingsPage"));
+const PreferencesPage = React.lazy(() => import("./PreferencesPage"));
+const SettingsPage = React.lazy(() => import("./SettingsPage"));
+const SourcesPage = React.lazy(() => import("./SourcesPage"));
 
 const useAddAnalyticsContextForWorkspace = (workspace: WorkspaceRead): void => {
   const analyticsContext = useMemo(

airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx

@@ -1,7 +1,6 @@
 import { Field, useField } from "formik";
 import React, { useCallback } from "react";
 
-import { DatePicker } from "components/ui/DatePicker";
 import { DropDown } from "components/ui/DropDown";
 import { Input } from "components/ui/Input";
 import { Multiselect } from "components/ui/Multiselect";
@@ -14,6 +13,8 @@ import { isDefined } from "utils/common";
 
 import SecretConfirmationControl from "./SecretConfirmationControl";
 
+const DatePicker = React.lazy(() => import("components/ui/DatePicker"));
+
 interface ControlProps {
   property: FormBaseItem;
   name: string;

airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/PropertySection.tsx

@@ -17,7 +17,7 @@ interface PropertySectionProps {
   disabled?: boolean;
 }
 
-const PropertySection: React.FC<PropertySectionProps> = ({ property, path, disabled }) => {
+export const PropertySection: React.FC<PropertySectionProps> = ({ property, path, disabled }) => {
   const propertyPath = path ?? property.path;
   const formikBag = useField(propertyPath);
   const [field, meta] = formikBag;
@@ -57,5 +57,3 @@ const PropertySection: React.FC<PropertySectionProps> = ({ property, path, disab
     </PropertyLabel>
   );
 };
-
-export { PropertySection };