Lazy load user tabs component to prevent circular dependencies (#1432)

src/App.tsx

@@ -1,5 +1,5 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, Suspense } from "react";
-import { Page } from "@patternfly/react-core";
+import { Page, Spinner } from "@patternfly/react-core";
 import { HashRouter as Router, Route, Switch } from "react-router-dom";
 import { ErrorBoundary } from "react-error-boundary";
 
@@ -60,7 +60,13 @@ const SecuredRoute = ({ route }: SecuredRouteProps) => {
       ? hasAccess(...route.access)
       : hasAccess(route.access);
 
-  if (accessAllowed) return <route.component />;
+  if (accessAllowed) {
+    return (
+      <Suspense fallback={<Spinner />}>
+        <route.component />
+      </Suspense>
+    );
+  }
 
   return <ForbiddenSection />;
 };

src/user/UsersTabs.tsx

@@ -28,7 +28,7 @@ import { toUsers } from "./routes/Users";
 import { UserRoleMapping } from "./UserRoleMapping";
 import { UserAttributes } from "./UserAttributes";
 
-export const UsersTabs = () => {
+const UsersTabs = () => {
   const { t } = useTranslation("users");
   const { addAlert, addError } = useAlerts();
   const history = useHistory();
@@ -225,3 +225,5 @@ export const UsersTabs = () => {
     </>
   );
 };
+
+export default UsersTabs;

src/user/routes/AddUser.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 { UsersTabs } from "../UsersTabs";
 
 export type AddUserParams = { realm: string };
 
 export const AddUserRoute: RouteDef = {
   path: "/:realm/users/add-user",
-  component: UsersTabs,
+  component: lazy(() => import("../UsersTabs")),
   breadcrumb: (t) => t("users:createUser"),
   access: "manage-users",
 };

src/user/routes/User.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 { UsersTabs } from "../UsersTabs";
 
 export type UserTab = "settings" | "groups" | "consents" | "attributes";
 
@@ -13,7 +13,7 @@ export type UserParams = {
 
 export const UserRoute: RouteDef = {
   path: "/:realm/users/:id/:tab",
-  component: UsersTabs,
+  component: lazy(() => import("../UsersTabs")),
   breadcrumb: (t) => t("users:userDetails"),
   access: "manage-users",
 };