make all routes lazy (#1445)

src/authentication/AuthenticationSection.tsx

@@ -46,7 +46,7 @@ const realmFlows = [
   "dockerAuthenticationFlow",
 ];
 
-export const AuthenticationSection = () => {
+export default function AuthenticationSection() {
   const { t } = useTranslation("authentication");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
@@ -293,4 +293,4 @@ export const AuthenticationSection = () => {
       </PageSection>
     </>
   );
-};
+}

src/authentication/FlowDetails.tsx

@@ -47,7 +47,7 @@ export const providerConditionFilter = (
   value: AuthenticationProviderRepresentation
 ) => value.displayName?.startsWith("Condition ");
 
-export const FlowDetails = () => {
+export default function FlowDetails() {
   const { t } = useTranslation("authentication");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
@@ -466,4 +466,4 @@ export const FlowDetails = () => {
       </PageSection>
     </>
   );
-};
+}

src/authentication/form/CreateFlow.tsx

@@ -19,7 +19,7 @@ import { NameDescription } from "./NameDescription";
 import { FlowType } from "./FlowType";
 import { toFlow } from "../routes/Flow";
 
-export const CreateFlow = () => {
+export default function CreateFlow() {
   const { t } = useTranslation("authentication");
   const history = useHistory();
   const { realm } = useRealm();
@@ -88,4 +88,4 @@ export const CreateFlow = () => {
       </PageSection>
     </>
   );
-};
+}

src/authentication/routes/Authentication.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AuthenticationSection } from "../AuthenticationSection";
 
 export type AuthenticationParams = { realm: string; tab?: string };
 
 export const AuthenticationRoute: RouteDef = {
   path: "/:realm/authentication/:tab?",
-  component: AuthenticationSection,
+  component: lazy(() => import("../AuthenticationSection")),
   breadcrumb: (t) => t("authentication"),
   access: "view-realm",
 };

src/authentication/routes/CreateFlow.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { CreateFlow } from "../form/CreateFlow";
 
 export type CreateFlowParams = { realm: string };
 
 export const CreateFlowRoute: RouteDef = {
   path: "/:realm/authentication/flows/create",
-  component: CreateFlow,
+  component: lazy(() => import("../form/CreateFlow")),
   breadcrumb: (t) => t("authentication:createFlow"),
   access: "manage-authorization",
 };

src/authentication/routes/Flow.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { FlowDetails } from "../FlowDetails";
 
 export type FlowParams = {
   realm: string;
@@ -12,7 +12,7 @@ export type FlowParams = {
 
 export const FlowRoute: RouteDef = {
   path: "/:realm/authentication/:id/:usedBy/:builtIn?",
-  component: FlowDetails,
+  component: lazy(() => import("../FlowDetails")),
   breadcrumb: (t) => t("authentication:flowDetails"),
   access: "manage-authorization",
 };

src/client-scopes/ClientScopesSection.tsx

@@ -45,7 +45,7 @@ import {
 } from "./details/SearchFilter";
 import type { Row } from "../clients/scopes/ClientScopes";
 
-export const ClientScopesSection = () => {
+export default function ClientScopesSection() {
   const { realm } = useRealm();
   const { whoAmI } = useWhoAmI();
   const { t } = useTranslation("client-scopes");
@@ -282,4 +282,4 @@ export const ClientScopesSection = () => {
       </PageSection>
     </>
   );
-};
+}

src/client-scopes/details/MappingDetails.tsx

@@ -31,7 +31,7 @@ import { toClientScope } from "../routes/ClientScope";
 
 import "./mapping-details.css";
 
-export const MappingDetails = () => {
+export default function MappingDetails() {
   const { t } = useTranslation("client-scopes");
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -269,4 +269,4 @@ export const MappingDetails = () => {
       </PageSection>
     </>
   );
-};
+}

src/client-scopes/form/ClientScopeForm.tsx

@@ -35,7 +35,7 @@ import {
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { toMapper } from "../routes/Mapper";
 
-export const ClientScopeForm = () => {
+export default function ClientScopeForm() {
   const { t } = useTranslation("client-scopes");
   const [clientScope, setClientScope] =
     useState<ClientScopeDefaultOptionalType>();
@@ -307,4 +307,4 @@ export const ClientScopeForm = () => {
       </PageSection>
     </>
   );
-};
+}

src/client-scopes/routes/ClientScope.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientScopeForm } from "../form/ClientScopeForm";
 
 export type ClientScopeTab = "settings" | "mappers" | "scope";
 
@@ -14,7 +14,7 @@ export type ClientScopeParams = {
 
 export const ClientScopeRoute: RouteDef = {
   path: "/:realm/client-scopes/:id/:type/:tab",
-  component: ClientScopeForm,
+  component: lazy(() => import("../form/ClientScopeForm")),
   breadcrumb: (t) => t("client-scopes:clientScopeDetails"),
   access: "view-clients",
 };

src/client-scopes/routes/ClientScopes.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientScopesSection } from "../ClientScopesSection";
 
 export type ClientScopesParams = { realm: string };
 
 export const ClientScopesRoute: RouteDef = {
   path: "/:realm/client-scopes",
-  component: ClientScopesSection,
+  component: lazy(() => import("../ClientScopesSection")),
   breadcrumb: (t) => t("client-scopes:clientScopeList"),
   access: "view-clients",
 };

src/client-scopes/routes/Mapper.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { MappingDetails } from "../details/MappingDetails";
 
 export type MapperParams = {
   realm: string;
@@ -12,7 +12,7 @@ export type MapperParams = {
 
 export const MapperRoute: RouteDef = {
   path: "/:realm/client-scopes/:id/:type/mappers/:mapperId",
-  component: MappingDetails,
+  component: lazy(() => import("../details/MappingDetails")),
   breadcrumb: (t) => t("common:mappingDetails"),
   access: "view-clients",
 };

src/client-scopes/routes/NewClientScope.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientScopeForm } from "../form/ClientScopeForm";
 
 export type NewClientScopeParams = { realm: string };
 
 export const NewClientScopeRoute: RouteDef = {
   path: "/:realm/client-scopes/new",
-  component: ClientScopeForm,
+  component: lazy(() => import("../form/ClientScopeForm")),
   breadcrumb: (t) => t("client-scopes:createClientScope"),
   access: "manage-clients",
 };

src/clients/ClientDetails.tsx

@@ -170,7 +170,7 @@ export type SaveOptions = {
   messageKey?: string;
 };
 
-export const ClientDetails = () => {
+export default function ClientDetails() {
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -497,4 +497,4 @@ export const ClientDetails = () => {
       </PageSection>
     </>
   );
-};
+}

src/clients/ClientsSection.tsx

@@ -32,7 +32,7 @@ import { toClient } from "./routes/Client";
 import { toImportClient } from "./routes/ImportClient";
 import { isRealmClient, getProtocolName } from "./utils";
 
-export const ClientsSection = () => {
+export default function ClientsSection() {
   const { t } = useTranslation("clients");
   const { addAlert, addError } = useAlerts();
 
@@ -213,4 +213,4 @@ export const ClientsSection = () => {
       </PageSection>
     </>
   );
-};
+}

src/clients/add/NewClientForm.tsx

@@ -20,7 +20,7 @@ import { toClients } from "../routes/Clients";
 import { CapabilityConfig } from "./CapabilityConfig";
 import { GeneralSettings } from "./GeneralSettings";
 
-export const NewClientForm = () => {
+export default function NewClientForm() {
   const { t } = useTranslation("clients");
   const { realm } = useRealm();
   const adminClient = useAdminClient();
@@ -151,4 +151,4 @@ export const NewClientForm = () => {
       </PageSection>
     </>
   );
-};
+}

src/clients/import/ImportForm.tsx

@@ -23,7 +23,7 @@ import { ClientDescription } from "../ClientDescription";
 import { toClient } from "../routes/Client";
 import { toClients } from "../routes/Clients";
 
-export const ImportForm = () => {
+export default function ImportForm() {
   const { t } = useTranslation("clients");
   const history = useHistory();
   const adminClient = useAdminClient();
@@ -111,4 +111,4 @@ export const ImportForm = () => {
       </PageSection>
     </>
   );
-};
+}

src/clients/initial-access/CreateInitialAccessToken.tsx

@@ -22,7 +22,7 @@ import { useAlerts } from "../../components/alert/Alerts";
 import { AccessTokenDialog } from "./AccessTokenDialog";
 import { toClients } from "../routes/Clients";
 
-export const CreateInitialAccessToken = () => {
+export default function CreateInitialAccessToken() {
   const { t } = useTranslation("clients");
   const { handleSubmit, control } = useForm();
 
@@ -144,4 +144,4 @@ export const CreateInitialAccessToken = () => {
       </PageSection>
     </>
   );
-};
+}

src/clients/routes/AddClient.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { NewClientForm } from "../add/NewClientForm";
 
 export type AddClientParams = { realm: string };
 
 export const AddClientRoute: RouteDef = {
   path: "/:realm/clients/add-client",
-  component: NewClientForm,
+  component: lazy(() => import("../add/NewClientForm")),
   breadcrumb: (t) => t("clients:createClient"),
   access: "manage-clients",
 };

src/clients/routes/Client.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientDetails } from "../ClientDetails";
 
 export type ClientTab =
   | "settings"
@@ -18,7 +18,7 @@ export type ClientParams = {
 
 export const ClientRoute: RouteDef = {
   path: "/:realm/clients/:clientId/:tab",
-  component: ClientDetails,
+  component: lazy(() => import("../ClientDetails")),
   breadcrumb: (t) => t("clients:clientSettings"),
   access: "view-clients",
 };

src/clients/routes/Clients.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientsSection } from "../ClientsSection";
 
 export type ClientsTab = "list" | "initialAccessToken";
 
@@ -12,7 +12,7 @@ export type ClientsParams = {
 
 export const ClientsRoute: RouteDef = {
   path: "/:realm/clients/:tab?",
-  component: ClientsSection,
+  component: lazy(() => import("../ClientsSection")),
   breadcrumb: (t) => t("clients:clientList"),
   access: "query-clients",
 };

src/clients/routes/CreateInitialAccessToken.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { CreateInitialAccessToken } from "../initial-access/CreateInitialAccessToken";
 
 export type CreateInitialAccessTokenParams = { realm: string };
 
 export const CreateInitialAccessTokenRoute: RouteDef = {
   path: "/:realm/clients/initialAccessToken/create",
-  component: CreateInitialAccessToken,
+  component: lazy(() => import("../initial-access/CreateInitialAccessToken")),
   breadcrumb: (t) => t("clients:createToken"),
   access: "manage-clients",
 };

src/clients/routes/ImportClient.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ImportForm } from "../import/ImportForm";
 
 export type ImportClientParams = { realm: string };
 
 export const ImportClientRoute: RouteDef = {
   path: "/:realm/clients/import-client",
-  component: ImportForm,
+  component: lazy(() => import("../import/ImportForm")),
   breadcrumb: (t) => t("clients:importClient"),
   access: "manage-clients",
 };

src/clients/routes/Mapper.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { MappingDetails } from "../../client-scopes/details/MappingDetails";
+import { lazy } from "react";
 
 export type MapperParams = {
   realm: string;
@@ -11,7 +11,7 @@ export type MapperParams = {
 
 export const MapperRoute: RouteDef = {
   path: "/:realm/clients/:id/mappers/:mapperId",
-  component: MappingDetails,
+  component: lazy(() => import("../../client-scopes/details/MappingDetails")),
   breadcrumb: (t) => t("common:mappingDetails"),
   access: "view-clients",
 };

src/dashboard/Dashboard.tsx

@@ -165,7 +165,7 @@ const Dashboard = () => {
   );
 };
 
-export const DashboardSection = () => {
+export default function DashboardSection() {
   const { realm } = useRealm();
   const isMasterRealm = realm === "master";
   return (
@@ -174,4 +174,4 @@ export const DashboardSection = () => {
       {isMasterRealm && <Dashboard />}
     </>
   );
-};
+}

src/dashboard/routes/Dashboard.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { DashboardSection } from "../Dashboard";
 
 export type DashboardParams = { realm?: string };
 
 export const DashboardRoute: RouteDef = {
   path: "/:realm?",
-  component: DashboardSection,
+  component: lazy(() => import("../Dashboard")),
   breadcrumb: (t) => t("common:home"),
   access: "anyone",
 };

src/events/EventsSection.tsx

@@ -84,7 +84,7 @@ const DetailCell = (event: EventRepresentation) => (
   </DescriptionList>
 );
 
-export const EventsSection = () => {
+export default function EventsSection() {
   const { t } = useTranslation("events");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
@@ -482,4 +482,4 @@ export const EventsSection = () => {
       </PageSection>
     </>
   );
-};
+}

src/events/routes/Events.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { EventsSection } from "../EventsSection";
 
 export type EventsTab = "userEvents" | "adminEvents";
 
@@ -12,7 +12,7 @@ export type EventsParams = {
 
 export const EventsRoute: RouteDef = {
   path: "/:realm/events/:tab?",
-  component: EventsSection,
+  component: lazy(() => import("../EventsSection")),
   breadcrumb: (t) => t("events:title"),
   access: "view-events",
 };

src/groups/GroupsSection.tsx

@@ -26,7 +26,7 @@ import { GroupsModal } from "./GroupsModal";
 
 import "./GroupsSection.css";
 
-export const GroupsSection = () => {
+export default function GroupsSection() {
   const { t } = useTranslation("groups");
   const [activeTab, setActiveTab] = useState(0);
 
@@ -174,4 +174,4 @@ export const GroupsSection = () => {
       </PageSection>
     </>
   );
-};
+}

src/groups/SearchGroups.tsx

@@ -29,7 +29,7 @@ type SearchGroup = GroupRepresentation & {
   link?: string;
 };
 
-export const SearchGroups = () => {
+export default function SearchGroups() {
   const { t } = useTranslation("groups");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
@@ -185,4 +185,4 @@ export const SearchGroups = () => {
       </PageSection>
     </>
   );
-};
+}

src/groups/routes/Groups.tsx

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { GroupsSection } from "../GroupsSection";
 
 export type GroupsParams = { realm: string };
 
 export const GroupsRoute: RouteDef = {
   path: "/:realm/groups",
-  component: GroupsSection,
+  component: lazy(() => import("../GroupsSection")),
   access: "query-groups",
   matchOptions: {
     exact: false,

src/groups/routes/GroupsSearch.tsx

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { SearchGroups } from "../SearchGroups";
 
 export type GroupsSearchParams = { realm: string };
 
 export const GroupsSearchRoute: RouteDef = {
   path: "/:realm/groups/search",
-  component: SearchGroups,
+  component: lazy(() => import("../SearchGroups")),
   breadcrumb: (t) => t("groups:searchGroups"),
   access: "query-groups",
 };

src/identity-providers/IdentityProvidersSection.tsx

@@ -37,7 +37,7 @@ import { ManageOderDialog } from "./ManageOrderDialog";
 import { toIdentityProvider } from "./routes/IdentityProvider";
 import { toIdentityProviderCreate } from "./routes/IdentityProviderCreate";
 
-export const IdentityProvidersSection = () => {
+export default function IdentityProvidersSection() {
   const { t } = useTranslation("identity-providers");
   const identityProviders = _.groupBy(
     useServerInfo().identityProviders,
@@ -269,4 +269,4 @@ export const IdentityProvidersSection = () => {
       </PageSection>
     </>
   );
-};
+}

src/identity-providers/add/AddIdentityProvider.tsx

@@ -20,7 +20,7 @@ import { GeneralSettings } from "./GeneralSettings";
 import { toIdentityProvider } from "../routes/IdentityProvider";
 import type { IdentityProviderCreateParams } from "../routes/IdentityProviderCreate";
 
-export const AddIdentityProvider = () => {
+export default function AddIdentityProvider() {
   const { t } = useTranslation("identity-providers");
   const { providerId } = useParams<IdentityProviderCreateParams>();
   const form = useForm<IdentityProviderRepresentation>();
@@ -92,4 +92,4 @@ export const AddIdentityProvider = () => {
       </PageSection>
     </>
   );
-};
+}

src/identity-providers/add/AddMapper.tsx

@@ -47,7 +47,7 @@ type Role = RoleRepresentation & {
   clientId?: string;
 };
 
-export const AddMapper = () => {
+export default function AddMapper() {
   const { t } = useTranslation("identity-providers");
 
   const form = useForm<IdPMapperRepresentationWithAttributes>();
@@ -901,4 +901,4 @@ export const AddMapper = () => {
       </FormAccess>
     </PageSection>
   );
-};
+}

src/identity-providers/add/AddOpenIdConnect.tsx

@@ -23,7 +23,7 @@ type DiscoveryIdentity = IdentityProviderRepresentation & {
   discoveryEndpoint?: string;
 };
 
-export const AddOpenIdConnect = () => {
+export default function AddOpenIdConnect() {
   const { t } = useTranslation("identity-providers");
   const history = useHistory();
   const { url } = useRouteMatch();
@@ -97,4 +97,4 @@ export const AddOpenIdConnect = () => {
       </PageSection>
     </>
   );
-};
+}

src/identity-providers/add/AddSamlConnect.tsx

@@ -18,7 +18,7 @@ import { SamlConnectSettings } from "./SamlConnectSettings";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useAlerts } from "../../components/alert/Alerts";
 
-export const AddSamlConnect = () => {
+export default function AddSamlConnect() {
   const { t } = useTranslation("identity-providers");
   const history = useHistory();
   const id = "saml";
@@ -89,4 +89,4 @@ export const AddSamlConnect = () => {
       </PageSection>
     </>
   );
-};
+}

src/identity-providers/add/DetailSettings.tsx

@@ -101,7 +101,7 @@ const Header = ({ onChange, value, save, toggleDeleteDialog }: HeaderProps) => {
   );
 };
 
-export const DetailSettings = () => {
+export default function DetailSettings() {
   const { t } = useTranslation("identity-providers");
   const { alias, providerId } = useParams<IdentityProviderParams>();
 
@@ -397,4 +397,4 @@ export const DetailSettings = () => {
       </PageSection>
     </>
   );
-};
+}

src/identity-providers/routes/AddMapper.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AddMapper } from "../add/AddMapper";
 
 export type IdentityProviderAddMapperParams = {
   realm: string;
@@ -12,7 +12,7 @@ export type IdentityProviderAddMapperParams = {
 
 export const IdentityProviderAddMapperRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/:alias/:tab/create",
-  component: AddMapper,
+  component: lazy(() => import("../add/AddMapper")),
   access: "manage-identity-providers",
   breadcrumb: (t) => t("identity-providers:addIdPMapper"),
 };

src/identity-providers/routes/EditMapper.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AddMapper } from "../add/AddMapper";
 
 export type IdentityProviderEditMapperParams = {
   realm: string;
@@ -12,7 +12,7 @@ export type IdentityProviderEditMapperParams = {
 
 export const IdentityProviderEditMapperRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/:alias/mappers/:id",
-  component: AddMapper,
+  component: lazy(() => import("../add/AddMapper")),
   access: "manage-identity-providers",
   breadcrumb: (t) => t("identity-providers:editIdPMapper"),
 };

src/identity-providers/routes/IdentityProvider.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { DetailSettings } from "../add/DetailSettings";
 
 type IdentityProviderTabs = "settings" | "mappers";
 
@@ -14,7 +14,7 @@ export type IdentityProviderParams = {
 
 export const IdentityProviderRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/:alias/:tab",
-  component: DetailSettings,
+  component: lazy(() => import("../add/DetailSettings")),
   breadcrumb: (t) => t("identity-providers:providerDetails"),
   access: "manage-identity-providers",
 };

src/identity-providers/routes/IdentityProviderCreate.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AddIdentityProvider } from "../add/AddIdentityProvider";
 
 export type IdentityProviderCreateParams = {
   realm: string;
@@ -10,7 +10,7 @@ export type IdentityProviderCreateParams = {
 
 export const IdentityProviderCreateRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/add",
-  component: AddIdentityProvider,
+  component: lazy(() => import("../add/AddIdentityProvider")),
   breadcrumb: (t) => t("identity-providers:addProvider"),
   access: "manage-identity-providers",
 };

src/identity-providers/routes/IdentityProviderKeycloakOidc.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AddOpenIdConnect } from "../add/AddOpenIdConnect";
 
 export type IdentityProviderKeycloakOidcParams = { realm: string };
 
 export const IdentityProviderKeycloakOidcRoute: RouteDef = {
   path: "/:realm/identity-providers/keycloak-oidc/add",
-  component: AddOpenIdConnect,
+  component: lazy(() => import("../add/AddOpenIdConnect")),
   breadcrumb: (t) => t("identity-providers:addKeycloakOpenIdProvider"),
   access: "manage-identity-providers",
 };

src/identity-providers/routes/IdentityProviderOidc.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AddOpenIdConnect } from "../add/AddOpenIdConnect";
 
 export type IdentityProviderOidcParams = { realm: string };
 
 export const IdentityProviderOidcRoute: RouteDef = {
   path: "/:realm/identity-providers/oidc/add",
-  component: AddOpenIdConnect,
+  component: lazy(() => import("../add/AddOpenIdConnect")),
   breadcrumb: (t) => t("identity-providers:addOpenIdProvider"),
   access: "manage-identity-providers",
 };

src/identity-providers/routes/IdentityProviderSaml.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AddSamlConnect } from "../add/AddSamlConnect";
 
 export type IdentityProviderSamlParams = { realm: string };
 
 export const IdentityProviderSamlRoute: RouteDef = {
   path: "/:realm/identity-providers/saml/add",
-  component: AddSamlConnect,
+  component: lazy(() => import("../add/AddSamlConnect")),
   breadcrumb: (t) => t("identity-providers:addSamlProvider"),
   access: "manage-identity-providers",
 };

src/identity-providers/routes/IdentityProviders.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { IdentityProvidersSection } from "../IdentityProvidersSection";
 
 export type IdentityProvidersParams = { realm: string };
 
 export const IdentityProvidersRoute: RouteDef = {
   path: "/:realm/identity-providers",
-  component: IdentityProvidersSection,
+  component: lazy(() => import("../IdentityProvidersSection")),
   breadcrumb: (t) => t("identityProviders"),
   access: "view-identity-providers",
 };

src/realm-roles/RealmRoleTabs.tsx

@@ -42,7 +42,7 @@ type myRealmRepresentation = RealmRepresentation & {
   };
 };
 
-export const RealmRoleTabs = () => {
+export default function RealmRoleTabs() {
   const { t } = useTranslation("roles");
   const form = useForm<RoleFormType>({ mode: "onChange" });
   const history = useHistory();
@@ -408,4 +408,4 @@ export const RealmRoleTabs = () => {
       </PageSection>
     </>
   );
-};
+}

src/realm-roles/RealmRolesSection.tsx

@@ -4,7 +4,7 @@ import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { RolesList } from "./RolesList";
 
-export const RealmRolesSection = () => {
+export default function RealmRolesSection() {
   const adminClient = useAdminClient();
 
   const loader = (first?: number, max?: number, search?: string) => {
@@ -30,4 +30,4 @@ export const RealmRolesSection = () => {
       </PageSection>
     </>
   );
-};
+}

src/realm-roles/routes/AddRole.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RealmRoleTabs } from "../RealmRoleTabs";
 
 export type AddRoleParams = { realm: string };
 
 export const AddRoleRoute: RouteDef = {
   path: "/:realm/roles/add-role",
-  component: RealmRoleTabs,
+  component: lazy(() => import("../RealmRoleTabs")),
   breadcrumb: (t) => t("roles:createRole"),
   access: "manage-realm",
 };

src/realm-roles/routes/AddRoleToClient.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RealmRoleTabs } from "../RealmRoleTabs";
 
 export type AddRoleToClientParams = {
   realm: string;
@@ -10,7 +10,7 @@ export type AddRoleToClientParams = {
 
 export const AddRoleToClientRoute: RouteDef = {
   path: "/:realm/clients/:clientId/roles/add-role",
-  component: RealmRoleTabs,
+  component: lazy(() => import("../RealmRoleTabs")),
   breadcrumb: (t) => t("roles:createRole"),
   access: "manage-realm",
 };

src/realm-roles/routes/ClientRole.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RealmRoleTabs } from "../RealmRoleTabs";
 
 export type ClientRoleTab = "details" | "attributes" | "users-in-role";
 
@@ -14,7 +14,7 @@ export type ClientRoleParams = {
 
 export const ClientRoleRoute: RouteDef = {
   path: "/:realm/clients/:clientId/roles/:id/:tab?",
-  component: RealmRoleTabs,
+  component: lazy(() => import("../RealmRoleTabs")),
   breadcrumb: (t) => t("roles:roleDetails"),
   access: "view-realm",
 };

src/realm-roles/routes/RealmRole.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router";
 import type { RouteDef } from "../../route-config";
-import { RealmRoleTabs } from "../RealmRoleTabs";
 
 export type RealmRoleTab =
   | "details"
@@ -17,7 +17,7 @@ export type RealmRoleParams = {
 
 export const RealmRoleRoute: RouteDef = {
   path: "/:realm/roles/:id/:tab?",
-  component: RealmRoleTabs,
+  component: lazy(() => import("../RealmRoleTabs")),
   breadcrumb: (t) => t("roles:roleDetails"),
   access: ["view-realm", "view-users"],
 };

src/realm-roles/routes/RealmRoles.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RealmRolesSection } from "../RealmRolesSection";
 
 export type RealmRolesParams = { realm: string };
 
 export const RealmRolesRoute: RouteDef = {
   path: "/:realm/roles",
-  component: RealmRolesSection,
+  component: lazy(() => import("../RealmRolesSection")),
   breadcrumb: (t) => t("roles:roleList"),
   access: "view-realm",
 };

src/realm-settings/ClientProfileForm.tsx

@@ -45,7 +45,7 @@ const defaultValues: ClientProfileForm = {
   executors: [],
 };
 
-export const ClientProfileForm = () => {
+export default function ClientProfileForm() {
   const { t } = useTranslation("realm-settings");
   const history = useHistory();
   const {
@@ -479,4 +479,4 @@ export const ClientProfileForm = () => {
       </PageSection>
     </>
   );
-};
+}

src/realm-settings/ExecutorForm.tsx

@@ -35,7 +35,7 @@ const defaultValues: ExecutorForm = {
   executor: "",
 };
 
-export const ExecutorForm = () => {
+export default function ExecutorForm() {
   const { t } = useTranslation("realm-settings");
   const history = useHistory();
   const { realm, profileName } = useParams<ClientProfileParams>();
@@ -204,4 +204,4 @@ export const ExecutorForm = () => {
       </PageSection>
     </>
   );
-};
+}

src/realm-settings/NewClientPolicyCondition.tsx

@@ -26,7 +26,7 @@ import type ComponentTypeRepresentation from "@keycloak/keycloak-admin-client/li
 import { useRealm } from "../context/realm-context/RealmContext";
 import type { EditClientPolicyParams } from "./routes/EditClientPolicy";
 
-export const NewClientPolicyCondition = () => {
+export default function NewClientPolicyCondition() {
   const { t } = useTranslation("realm-settings");
   const { addAlert, addError } = useAlerts();
   const history = useHistory();
@@ -194,4 +194,4 @@ export const NewClientPolicyCondition = () => {
       </FormPanel>
     </PageSection>
   );
-};
+}

src/realm-settings/NewClientPolicyForm.tsx

@@ -56,7 +56,7 @@ type PolicyDetailAttributes = {
   name: string;
 };
 
-export const NewClientPolicyForm = () => {
+export default function NewClientPolicyForm() {
   const { t } = useTranslation("realm-settings");
   const { errors, reset: resetForm } = useForm<NewClientPolicyForm>({
     defaultValues,
@@ -655,4 +655,4 @@ export const NewClientPolicyForm = () => {
       </PageSection>
     </>
   );
-};
+}

src/realm-settings/ProfilesTab.tsx

@@ -24,14 +24,15 @@ import { prettyPrintJSON } from "../util";
 import { Link } from "react-router-dom";
 import { toAddClientProfile } from "./routes/AddClientProfile";
 import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfileRepresentation";
-import "./RealmSettingsSection.css";
 import { toClientProfile } from "./routes/ClientProfile";
 
+import "./RealmSettingsSection.css";
+
 type ClientProfile = ClientProfileRepresentation & {
   global: boolean;
 };
 
-export const ProfilesTab = () => {
+export default function ProfilesTab() {
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
@@ -281,4 +282,4 @@ export const ProfilesTab = () => {
       )}
     </>
   );
-};
+}

src/realm-settings/RealmSettingsSection.tsx

@@ -87,7 +87,7 @@ const sortByPriority = (components: ComponentRepresentation[]) => {
   return sortedComponents;
 };
 
-export const RealmSettingsSection = () => {
+export default function RealmSettingsSection() {
   const adminClient = useAdminClient();
   const { realm: realmName } = useRealm();
   const [realm, setRealm] = useState<RealmRepresentation>();
@@ -130,4 +130,4 @@ export const RealmSettingsSection = () => {
       realmComponents={realmComponents}
     />
   );
-};
+}

src/realm-settings/RealmSettingsTabs.tsx

@@ -40,7 +40,7 @@ import { SecurityDefences } from "./security-defences/SecurityDefences";
 import { RealmSettingsSessionsTab } from "./SessionsTab";
 import { RealmSettingsThemesTab } from "./ThemesTab";
 import { RealmSettingsTokensTab } from "./TokensTab";
-import { ProfilesTab } from "./ProfilesTab";
+import ProfilesTab from "./ProfilesTab";
 import { PoliciesTab } from "./PoliciesTab";
 import { PartialImportDialog } from "./PartialImport";
 import { PartialExportDialog } from "./PartialExport";

src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx

@@ -92,7 +92,7 @@ export const AESGeneratedForm = ({
       if (
         key === "config" &&
         component.config?.secretSize &&
-        component.config?.active
+        component.config.active
       ) {
         form.setValue("config.secretSize", value.secretSize[0]);
 
@@ -338,7 +338,7 @@ export const AESGeneratedForm = ({
   );
 };
 
-export const AESGeneratedSettings = () => {
+export default function AESGeneratedSettings() {
   const { t } = useTranslation("realm-settings");
   const providerId = useRouteMatch<MatchParams>(
     "/:realm/realm-settings/keys/:id?/:providerType?/settings"
@@ -351,4 +351,4 @@ export const AESGeneratedSettings = () => {
       </PageSection>
     </>
   );
-};
+}

src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx

@@ -92,7 +92,7 @@ export const ECDSAGeneratedForm = ({
       if (
         key === "config" &&
         component.config?.ecdsaEllipticCurveKey &&
-        component.config?.active
+        component.config.active
       ) {
         form.setValue("config.secretSize", value.ecdsaEllipticCurveKey[0]);
 
@@ -329,7 +329,7 @@ export const ECDSAGeneratedForm = ({
   );
 };
 
-export const ECDSAGeneratedSettings = () => {
+export default function ECDSAGeneratedSettings() {
   const { t } = useTranslation("realm-settings");
   const providerId = useRouteMatch<MatchParams>(
     "/:realm/realm-settings/keys/:id?/:providerType?/settings"
@@ -342,4 +342,4 @@ export const ECDSAGeneratedSettings = () => {
       </PageSection>
     </>
   );
-};
+}

src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx

@@ -94,8 +94,8 @@ export const HMACGeneratedForm = ({
       if (
         key === "config" &&
         component.config?.secretSize &&
-        component.config?.active &&
+        component.config.active &&
-        component.config?.algorithm
+        component.config.algorithm
       ) {
         form.setValue("config.secretSize", value.secretSize[0]);
 
@@ -380,7 +380,7 @@ export const HMACGeneratedForm = ({
   );
 };
 
-export const HMACGeneratedSettings = () => {
+export default function HMACGeneratedSettings() {
   const { t } = useTranslation("realm-settings");
   const providerId = useRouteMatch<MatchParams>(
     "/:realm/realm-settings/keys/:id?/:providerType?/settings"
@@ -393,4 +393,4 @@ export const HMACGeneratedSettings = () => {
       </PageSection>
     </>
   );
-};
+}

src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx

@@ -92,12 +92,12 @@ export const JavaKeystoreForm = ({
       if (
         key === "config" &&
         component.config?.secretSize &&
-        component.config?.active &&
+        component.config.active &&
-        component.config?.algorithm &&
+        component.config.algorithm &&
-        component.config?.keystore &&
+        component.config.keystore &&
-        component.config?.keystorePassword &&
+        component.config.keystorePassword &&
-        component.config?.keyAlias &&
+        component.config.keyAlias &&
-        component.config?.keyPassword
+        component.config.keyPassword
       ) {
         form.setValue("config.secretSize", value.secretSize[0]);
 
@@ -449,7 +449,7 @@ export const JavaKeystoreForm = ({
   );
 };
 
-export const JavaKeystoreSettings = () => {
+export default function JavaKeystoreSettings() {
   const { t } = useTranslation("realm-settings");
   const providerId = useRouteMatch<MatchParams>(
     "/:realm/realm-settings/keys/:id?/:providerType?/settings"
@@ -462,4 +462,4 @@ export const JavaKeystoreSettings = () => {
       </PageSection>
     </>
   );
-};
+}

src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx

@@ -94,8 +94,8 @@ export const RSAGeneratedForm = ({
       if (
         key === "config" &&
         component.config?.secretSize &&
-        component.config?.active &&
+        component.config.active &&
-        component.config?.algorithm
+        component.config.algorithm
       ) {
         form.setValue("config.secretSize", value.secretSize[0]);
 
@@ -381,7 +381,7 @@ export const RSAGeneratedForm = ({
   );
 };
 
-export const RSAGeneratedSettings = () => {
+export default function RSAGeneratedSettings() {
   const { t } = useTranslation("realm-settings");
   const providerId = useRouteMatch<MatchParams>(
     "/:realm/realm-settings/keys/:id?/:providerType?/settings"
@@ -394,4 +394,4 @@ export const RSAGeneratedSettings = () => {
       </PageSection>
     </>
   );
-};
+}

src/realm-settings/key-providers/rsa/RSAForm.tsx

@@ -99,10 +99,10 @@ export const RSAForm = ({
       if (
         key === "config" &&
         component.config?.secretSize &&
-        component.config?.active &&
+        component.config.active &&
-        component.config?.algorithm &&
+        component.config.algorithm &&
-        component.config?.privateKey &&
+        component.config.privateKey &&
-        component.config?.certificate
+        component.config.certificate
       ) {
         form.setValue("config.secretSize", value.secretSize[0]);
 
@@ -407,7 +407,7 @@ export const RSAForm = ({
   );
 };
 
-export const RSASettings = () => {
+export default function RSASettings() {
   const { t } = useTranslation("realm-settings");
   const providerId = useRouteMatch<MatchParams>(
     "/:realm/realm-settings/keys/:id?/:providerType?/settings"
@@ -420,4 +420,4 @@ export const RSASettings = () => {
       </PageSection>
     </>
   );
-};
+}

src/realm-settings/routes/AddClientPolicy.ts

@@ -1,14 +1,14 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { NewClientPolicyForm } from "../NewClientPolicyForm";
 import { NewPolicyCrumb } from "../RealmSettingsSection";
 
 export type AddClientPolicyParams = { realm: string };
 
 export const AddClientPolicyRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies/add-client-policy",
-  component: NewClientPolicyForm,
+  component: lazy(() => import("../NewClientPolicyForm")),
   breadcrumb: () => NewPolicyCrumb,
   access: "manage-clients",
 };

src/realm-settings/routes/AddClientProfile.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientProfileForm } from "../ClientProfileForm";
 
 export type AddClientProfileParams = {
   realm: string;
@@ -9,7 +9,7 @@ export type AddClientProfileParams = {
 
 export const AddClientProfileRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies/add-profile",
-  component: ClientProfileForm,
+  component: lazy(() => import("../ClientProfileForm")),
   breadcrumb: (t) => t("realm-settings:newClientProfile"),
   access: "manage-realm",
 };

src/realm-settings/routes/AddCondition.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { NewClientPolicyCondition } from "../NewClientPolicyCondition";
 
 export type NewClientPolicyConditionParams = {
   realm: string;
@@ -10,7 +10,7 @@ export type NewClientPolicyConditionParams = {
 
 export const NewClientPolicyConditionRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies/:policyName?/edit-policy/create-condition",
-  component: NewClientPolicyCondition,
+  component: lazy(() => import("../NewClientPolicyCondition")),
   breadcrumb: (t) => t("realm-settings:addCondition"),
   access: "manage-clients",
 };

src/realm-settings/routes/AddExecutor.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ExecutorForm } from "../ExecutorForm";
 
 export type AddExecutorParams = {
   realm: string;
@@ -10,7 +10,7 @@ export type AddExecutorParams = {
 
 export const AddExecutorRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies/:profileName/add-executor",
-  component: ExecutorForm,
+  component: lazy(() => import("../ExecutorForm")),
   breadcrumb: (t) => t("realm-settings:addExecutor"),
   access: "manage-realm",
 };

src/realm-settings/routes/AesGeneratedSettings.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AESGeneratedSettings } from "../key-providers/aes-generated/AESGeneratedForm";
 import { EditProviderCrumb } from "../RealmSettingsSection";
 
 export type AesGeneratedSettingsParams = {
@@ -11,7 +11,9 @@ export type AesGeneratedSettingsParams = {
 
 export const AesGeneratedSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:id/aes-generated/settings",
-  component: AESGeneratedSettings,
+  component: lazy(
+    () => import("../key-providers/aes-generated/AESGeneratedForm")
+  ),
   breadcrumb: () => EditProviderCrumb,
   access: "view-realm",
 };

src/realm-settings/routes/ClientPolicies.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ProfilesTab } from "../ProfilesTab";
 
 export type ClientPoliciesParams = {
   realm: string;
@@ -9,7 +9,7 @@ export type ClientPoliciesParams = {
 
 export const ClientPoliciesRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies",
-  component: ProfilesTab,
+  component: lazy(() => import("../ProfilesTab")),
   breadcrumb: (t) => t("realm-settings:allClientPolicies"),
   access: "view-realm",
 };

src/realm-settings/routes/ClientProfile.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientProfileForm } from "../ClientProfileForm";
 
 export type ClientProfileParams = {
   realm: string;
@@ -10,7 +10,7 @@ export type ClientProfileParams = {
 
 export const ClientProfileRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies/:profileName/edit-profile",
-  component: ClientProfileForm,
+  component: lazy(() => import("../ClientProfileForm")),
   breadcrumb: (t) => t("realm-settings:clientProfile"),
   access: ["view-realm", "view-users"],
 };

src/realm-settings/routes/EcdsaGeneratedSettings.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ECDSAGeneratedSettings } from "../key-providers/ecdsa-generated/ECDSAGeneratedForm";
 import { EditProviderCrumb } from "../RealmSettingsSection";
 
 export type EcdsaGeneratedSettingsParams = {
@@ -11,7 +11,9 @@ export type EcdsaGeneratedSettingsParams = {
 
 export const EcdsaGeneratedSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:id/ecdsa-generated/settings",
-  component: ECDSAGeneratedSettings,
+  component: lazy(
+    () => import("../key-providers/ecdsa-generated/ECDSAGeneratedForm")
+  ),
   breadcrumb: () => EditProviderCrumb,
   access: "view-realm",
 };

src/realm-settings/routes/EditClientPolicy.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { NewClientPolicyForm } from "../NewClientPolicyForm";
 import { EditPolicyCrumb } from "../RealmSettingsSection";
 
 export type EditClientPolicyParams = {
@@ -11,7 +11,7 @@ export type EditClientPolicyParams = {
 
 export const EditClientPolicyRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies/:policyName/edit-policy",
-  component: NewClientPolicyForm,
+  component: lazy(() => import("../NewClientPolicyForm")),
   access: "manage-realm",
   breadcrumb: () => EditPolicyCrumb,
 };

src/realm-settings/routes/HmacGeneratedSettings.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { HMACGeneratedSettings } from "../key-providers/hmac-generated/HMACGeneratedForm";
 import { EditProviderCrumb } from "../RealmSettingsSection";
 
 export type HmacGeneratedSettingsParams = {
@@ -11,7 +11,9 @@ export type HmacGeneratedSettingsParams = {
 
 export const HmacGeneratedSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:id/hmac-generated/settings",
-  component: HMACGeneratedSettings,
+  component: lazy(
+    () => import("../key-providers/hmac-generated/HMACGeneratedForm")
+  ),
   breadcrumb: () => EditProviderCrumb,
   access: "view-realm",
 };

src/realm-settings/routes/JavaKeystoreSettings.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { JavaKeystoreSettings } from "../key-providers/java-keystore/JavaKeystoreForm";
 import { EditProviderCrumb } from "../RealmSettingsSection";
 
 export type JavaKeystoreSettingsParams = {
@@ -11,7 +11,9 @@ export type JavaKeystoreSettingsParams = {
 
 export const JavaKeystoreSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:id/java-keystore/settings",
-  component: JavaKeystoreSettings,
+  component: lazy(
+    () => import("../key-providers/java-keystore/JavaKeystoreForm")
+  ),
   breadcrumb: () => EditProviderCrumb,
   access: "view-realm",
 };

src/realm-settings/routes/RealmSettings.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RealmSettingsSection } from "../RealmSettingsSection";
 
 export type RealmSettingsTab =
   | "general"
@@ -22,7 +22,7 @@ export type RealmSettingsParams = {
 
 export const RealmSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/:tab?",
-  component: RealmSettingsSection,
+  component: lazy(() => import("../RealmSettingsSection")),
   breadcrumb: (t) => t("realmSettings"),
   access: "view-realm",
 };

src/realm-settings/routes/RsaGeneratedSettings.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RSAGeneratedSettings } from "../key-providers/rsa-generated/RSAGeneratedForm";
 import { EditProviderCrumb } from "../RealmSettingsSection";
 
 export type RsaGeneratedSettingsParams = {
@@ -11,7 +11,9 @@ export type RsaGeneratedSettingsParams = {
 
 export const RsaGeneratedSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:id/rsa-generated/settings",
-  component: RSAGeneratedSettings,
+  component: lazy(
+    () => import("../key-providers/rsa-generated/RSAGeneratedForm")
+  ),
   breadcrumb: () => EditProviderCrumb,
   access: "view-realm",
 };

src/realm-settings/routes/RsaSettings.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RSASettings } from "../key-providers/rsa/RSAForm";
 import { EditProviderCrumb } from "../RealmSettingsSection";
 
 export type RsaSettingsParams = {
@@ -11,7 +11,7 @@ export type RsaSettingsParams = {
 
 export const RsaSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:id/rsa/settings",
-  component: RSASettings,
+  component: lazy(() => import("../key-providers/rsa/RSAForm")),
   breadcrumb: () => EditProviderCrumb,
   access: "view-realm",
 };

src/realm/add/NewRealmForm.tsx

@@ -21,7 +21,7 @@ import { useRealm } from "../../context/realm-context/RealmContext";
 import { useWhoAmI } from "../../context/whoami/WhoAmI";
 import { toDashboard } from "../../dashboard/routes/Dashboard";
 
-export const NewRealmForm = () => {
+export default function NewRealmForm() {
   const { t } = useTranslation("realm");
   const history = useHistory();
   const { refresh } = useWhoAmI();
@@ -111,4 +111,4 @@ export const NewRealmForm = () => {
       </PageSection>
     </>
   );
-};
+}

src/realm/routes/AddRealm.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { NewRealmForm } from "../add/NewRealmForm";
 
 export type AddRealmParams = { realm: string };
 
 export const AddRealmRoute: RouteDef = {
   path: "/:realm/add-realm",
-  component: NewRealmForm,
+  component: lazy(() => import("../add/NewRealmForm")),
   breadcrumb: (t) => t("realm:createRealm"),
   access: "manage-realm",
 };

src/sessions/SessionsSection.tsx

@@ -35,7 +35,7 @@ const Clients = (row: UserSessionRepresentation) => {
   );
 };
 
-export const SessionsSection = () => {
+export default function SessionsSection() {
   const { t } = useTranslation("sessions");
   const adminClient = useAdminClient();
   const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
@@ -213,4 +213,4 @@ export const SessionsSection = () => {
       </PageSection>
     </>
   );
-};
+}

src/sessions/routes/Sessions.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { SessionsSection } from "../SessionsSection";
 
 export type SessionsParams = { realm: string };
 
 export const SessionsRoute: RouteDef = {
   path: "/:realm/sessions",
-  component: SessionsSection,
+  component: lazy(() => import("../SessionsSection")),
   breadcrumb: (t) => t("sessions:title"),
   access: "view-realm",
 };

src/user-federation/UserFederationKerberosSettings.tsx

@@ -79,7 +79,7 @@ const KerberosSettingsHeader = ({
   );
 };
 
-export const UserFederationKerberosSettings = () => {
+export default function UserFederationKerberosSettings() {
   const { t } = useTranslation("user-federation");
   const form = useForm<ComponentRepresentation>({ mode: "onChange" });
   const history = useHistory();
@@ -199,4 +199,4 @@ export const UserFederationKerberosSettings = () => {
       </PageSection>
     </>
   );
-};
+}

src/user-federation/UserFederationLdapSettings.tsx

@@ -172,7 +172,7 @@ const LdapSettingsHeader = ({
   );
 };
 
-export const UserFederationLdapSettings = () => {
+export default function UserFederationLdapSettings() {
   const { t } = useTranslation("user-federation");
   const form = useForm<ComponentRepresentation>({ mode: "onChange" });
   const history = useHistory();
@@ -373,4 +373,4 @@ export const UserFederationLdapSettings = () => {
       </PageSection>
     </>
   );
-};
+}

src/user-federation/UserFederationSection.tsx

@@ -26,7 +26,7 @@ import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import "./user-federation.css";
 
-export const UserFederationSection = () => {
+export default function UserFederationSection() {
   const [userFederations, setUserFederations] =
     useState<ComponentRepresentation[]>();
   const { addAlert, addError } = useAlerts();
@@ -205,4 +205,4 @@ export const UserFederationSection = () => {
       </PageSection>
     </>
   );
-};
+}

src/user-federation/ldap/mappers/LdapMapperDetails.tsx

@@ -35,7 +35,7 @@ import { LdapMapperHardcodedAttribute } from "./LdapMapperHardcodedAttribute";
 import { LdapMapperRoleGroup } from "./LdapMapperRoleGroup";
 import { useRealm } from "../../../context/realm-context/RealmContext";
 
-export const LdapMapperDetails = () => {
+export default function LdapMapperDetails() {
   const form = useForm<ComponentRepresentation>();
   const [mapping, setMapping] = useState<ComponentRepresentation>();
 
@@ -400,4 +400,4 @@ export const LdapMapperDetails = () => {
       </PageSection>
     </>
   );
-};
+}

src/user-federation/routes/NewKerberosUserFederation.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationKerberosSettings } from "../UserFederationKerberosSettings";
 
 export type NewKerberosUserFederationParams = { realm: string };
 
 export const NewKerberosUserFederationRoute: RouteDef = {
   path: "/:realm/user-federation/kerberos/new",
-  component: UserFederationKerberosSettings,
+  component: lazy(() => import("../UserFederationKerberosSettings")),
   breadcrumb: (t) => t("common:settings"),
   access: "view-realm",
 };

src/user-federation/routes/NewLdapUserFederation.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationLdapSettings } from "../UserFederationLdapSettings";
 
 export type NewLdapUserFederationParams = { realm: string };
 
 export const NewLdapUserFederationRoute: RouteDef = {
   path: "/:realm/user-federation/ldap/new",
-  component: UserFederationLdapSettings,
+  component: lazy(() => import("../UserFederationLdapSettings")),
   breadcrumb: (t) => t("user-federation:addOneLdap"),
   access: "view-realm",
 };

src/user-federation/routes/UserFederation.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationSection } from "../UserFederationSection";
 
 export type UserFederationParams = { realm: string };
 
 export const UserFederationRoute: RouteDef = {
   path: "/:realm/user-federation",
-  component: UserFederationSection,
+  component: lazy(() => import("../UserFederationSection")),
   breadcrumb: (t) => t("userFederation"),
   access: "view-realm",
 };

src/user-federation/routes/UserFederationKerberos.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationKerberosSettings } from "../UserFederationKerberosSettings";
 
 export type UserFederationKerberosParams = {
   realm: string;
@@ -10,7 +10,7 @@ export type UserFederationKerberosParams = {
 
 export const UserFederationKerberosRoute: RouteDef = {
   path: "/:realm/user-federation/kerberos/:id",
-  component: UserFederationKerberosSettings,
+  component: lazy(() => import("../UserFederationKerberosSettings")),
   breadcrumb: (t) => t("common:settings"),
   access: "view-realm",
 };

src/user-federation/routes/UserFederationLdap.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationLdapSettings } from "../UserFederationLdapSettings";
 
 export type UserFederationLdapParams = {
   realm: string;
@@ -11,7 +11,7 @@ export type UserFederationLdapParams = {
 
 export const UserFederationLdapRoute: RouteDef = {
   path: "/:realm/user-federation/ldap/:id/:tab?",
-  component: UserFederationLdapSettings,
+  component: lazy(() => import("../UserFederationLdapSettings")),
   breadcrumb: (t) => t("common:settings"),
   access: "view-realm",
 };

src/user-federation/routes/UserFederationLdapMapper.ts

@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { LdapMapperDetails } from "../ldap/mappers/LdapMapperDetails";
 
 export type UserFederationLdapMapperParams = {
   realm: string;
@@ -12,7 +12,7 @@ export type UserFederationLdapMapperParams = {
 
 export const UserFederationLdapMapperRoute: RouteDef = {
   path: "/:realm/user-federation/ldap/:id/:tab/:mapperId",
-  component: LdapMapperDetails,
+  component: lazy(() => import("../ldap/mappers/LdapMapperDetails")),
   breadcrumb: (t) => t("common:mappingDetails"),
   access: "view-realm",
 };

src/user-federation/routes/UserFederationsKerberos.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationSection } from "../UserFederationSection";
 
 export type UserFederationsKerberosParams = { realm: string };
 
 export const UserFederationsKerberosRoute: RouteDef = {
   path: "/:realm/user-federation/kerberos",
-  component: UserFederationSection,
+  component: lazy(() => import("../UserFederationSection")),
   access: "view-realm",
 };
 

src/user-federation/routes/UserFederationsLdap.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationSection } from "../UserFederationSection";
 
 export type UserFederationsLdapParams = { realm: string };
 
 export const UserFederationsLdapRoute: RouteDef = {
   path: "/:realm/user-federation/ldap",
-  component: UserFederationSection,
+  component: lazy(() => import("../UserFederationSection")),
   access: "view-realm",
 };
 

src/user/UsersSection.tsx

@@ -44,7 +44,7 @@ type BruteUser = UserRepresentation & {
   brute?: Record<string, object>;
 };
 
-export const UsersSection = () => {
+export default function UsersSection() {
   const { t } = useTranslation("users");
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -355,4 +355,4 @@ export const UsersSection = () => {
       </PageSection>
     </>
   );
-};
+}

src/user/routes/Users.ts

@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UsersSection } from "../UsersSection";
 
 export type UsersParams = { realm: string };
 
 export const UsersRoute: RouteDef = {
   path: "/:realm/users",
-  component: UsersSection,
+  component: lazy(() => import("../UsersSection")),
   breadcrumb: (t) => t("users:title"),
   access: "query-users",
 };