From 6cf586f447cc232ba84145fe080394a53f7e736c Mon Sep 17 00:00:00 2001
From: Jon Koops <jonkoops@gmail.com>
Date: Wed, 27 Oct 2021 16:15:30 +0200
Subject: [PATCH] Lazy load user tabs component to prevent circular
 dependencies (#1432)

---
 src/App.tsx                | 12 +++++++++---
 src/user/UsersTabs.tsx     |  4 +++-
 src/user/routes/AddUser.ts |  4 ++--
 src/user/routes/User.ts    |  4 ++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 44b92001de..45e9e16543 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
-import React, { FunctionComponent } from "react";
-import { Page } from "@patternfly/react-core";
+import React, { FunctionComponent, Suspense } from "react";
+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 />;
 };
diff --git a/src/user/UsersTabs.tsx b/src/user/UsersTabs.tsx
index 57c47c6c14..0ff7fbd16f 100644
--- a/src/user/UsersTabs.tsx
+++ b/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;
diff --git a/src/user/routes/AddUser.ts b/src/user/routes/AddUser.ts
index a03fdef28c..037e4a98a8 100644
--- a/src/user/routes/AddUser.ts
+++ b/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",
 };
diff --git a/src/user/routes/User.ts b/src/user/routes/User.ts
index fa38131020..75ffb33403 100644
--- a/src/user/routes/User.ts
+++ b/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",
 };