Utilize React-Lazy for Code Splitting

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,3 @@
-export { DatePicker } from "./DatePicker";
+import React from "react";
+
+export default React.lazy(() => import("./DatePicker"));

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

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

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

@@ -59,3 +59,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/destination/AllDestinationsPage/index.tsx

@@ -1 +1,4 @@
+import { AllDestinationsPage } from "./AllDestinationsPage";
+
 export { AllDestinationsPage } from "./AllDestinationsPage";
+export default AllDestinationsPage;

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

@@ -1 +1,4 @@
+import { DestinationItemPage } from "./DestinationItemPage";
+
 export { DestinationItemPage } from "./DestinationItemPage";
+export default 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,4 @@
+import { DestinationSettingsPage } from "./DestinationSettingsPage";
+
 export { DestinationSettingsPage } from "./DestinationSettingsPage";
+export default 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,7 @@
 import { Field, useField } from "formik";
 import React from "react";
 
-import { DatePicker } from "components/ui/DatePicker";
+import DatePicker from "components/ui/DatePicker";
 import { DropDown } from "components/ui/DropDown";
 import { Input } from "components/ui/Input";
 import { Multiselect } from "components/ui/Multiselect";

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

@@ -18,7 +18,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;
@@ -64,5 +64,3 @@ const PropertySection: React.FC<PropertySectionProps> = ({ property, path, disab
     </PropertyLabel>
   );
 };
-
-export { PropertySection };