Feature/lazy-loading

CHANGELOG.md

@@ -10,6 +10,8 @@
 
 - Vertical spacing unification across seacat admin screens app. (INDIGO Sprint 230414, [!26](https://github.com/TeskaLabs/seacat-admin-webui/pull/26))
 
+- Lazy loading enabled in auth and home modules. (INDIGO Sprint 230428, [!31](https://github.com/TeskaLabs/seacat-admin-webui/pull/31))
+
 ## v23.16-beta
 
 ### Compatibility

src/modules/auth/index.js

@@ -1,28 +1,30 @@
+import { lazy } from 'react';
+import { componentLoader } from 'asab-webui';
 import Module from 'asab-webui/abc/Module';
 
-import CredentialsListContainer from './credentials/CredentialsListContainer';
-import CredentialsDetailContainer from './credentials/CredentialsDetailContainer';
-import CredentialsCreateContainer from './credentials/CredentialsCreateContainer';
-import ResetPasswordContainer from './credentials/ResetPasswordContainer';
+const CredentialsListContainer = lazy(() => componentLoader(() => import('./credentials/CredentialsListContainer')));
+const CredentialsDetailContainer = lazy(() => componentLoader(() => import('./credentials/CredentialsDetailContainer')));
+const CredentialsCreateContainer = lazy(() => componentLoader(() => import('./credentials/CredentialsCreateContainer')));
+const ResetPasswordContainer = lazy(() => componentLoader(() => import('./credentials/ResetPasswordContainer')));
 
-import SessionListContainer from './session/SessionListContainer';
-import SessionDetailContainer from './session/SessionDetailContainer';
+const SessionListContainer = lazy(() => componentLoader(() => import('./session/SessionListContainer')));
+const SessionDetailContainer = lazy(() => componentLoader(() => import('./session/SessionDetailContainer')));
 
-import TenantListContainer from './tenant/TenantListContainer';
-import TenantCreateContainer from './tenant/TenantCreateContainer';
-import TenantDetailContainer from './tenant/TenantDetailContainer';
+const TenantListContainer = lazy(() => componentLoader(() => import('./tenant/TenantListContainer')));
+const TenantCreateContainer = lazy(() => componentLoader(() => import('./tenant/TenantCreateContainer')));
+const TenantDetailContainer = lazy(() => componentLoader(() => import('./tenant/TenantDetailContainer')));
 
-import RolesCreateContainer from './roles/RolesCreateContainer';
-import RolesListContainer from './roles/RolesListContainer';
-import RolesDetailContainer from './roles/RolesDetailContainer';
+const RolesCreateContainer = lazy(() => componentLoader(() => import('./roles/RolesCreateContainer')));
+const RolesListContainer = lazy(() => componentLoader(() => import('./roles/RolesListContainer')));
+const RolesDetailContainer = lazy(() => componentLoader(() => import('./roles/RolesDetailContainer')));
 
-import ResourcesListContainer from './resources/ResourcesListContainer';
-import ResourcesDetailContainer from './resources/ResourcesDetailContainer';
-import ResourcesCreateContainer from './resources/ResourcesCreateContainer';
+const ResourcesListContainer =lazy(() => componentLoader(() => import('./resources/ResourcesListContainer')));
+const ResourcesDetailContainer =lazy(() => componentLoader(() => import('./resources/ResourcesDetailContainer')));
+const ResourcesCreateContainer =lazy(() => componentLoader(() => import('./resources/ResourcesCreateContainer')));
 
-import ClientListContainer from './clients/ClientListContainer';
-import ClientCreateContainer from './clients/ClientCreateContainer';
-import ClientDetailContainer from './clients/ClientDetailContainer';
+const ClientListContainer = lazy(() => componentLoader(() => import('./clients/ClientListContainer')));
+const ClientCreateContainer = lazy(() => componentLoader(() => import('./clients/ClientCreateContainer')));
+const ClientDetailContainer = lazy(() => componentLoader(() => import('./clients/ClientDetailContainer')));
 
 // SCSS
 import './tenant/tenant.scss';

src/modules/auth/tenant/TenantDetailContainer.js

@@ -38,8 +38,6 @@ function TenantDetailContainer(props) {
 	const [page, setPage] = useState(1);
 	const [filter, setFilter] = useState("");
 	const limit = 10;
-	const [username, setUsername] = useState();
-	const [edit, setEdit] = useState(false);
 	const [loading, setLoading] = useState(true);
 	const [loadingCustomData, setLoadingCustomData] = useState(true);
 	const [show, setShow] = useState(false);
@@ -124,10 +122,6 @@ function TenantDetailContainer(props) {
 		retrieveData();
 	}, []);
 
-	useEffect(() => {
-		data.created_by && retrieveUserName();
-	}, [data.created_by]);
-
 	const retrieveData = async () => {
 		try {
 			let response = await SeaCatAuthAPI.get(`/tenant/${tenant_id}`);
@@ -141,19 +135,6 @@ function TenantDetailContainer(props) {
 		}
 	};
 
-	const retrieveUserName = async () => {
-		try {
-			let response = await SeaCatAuthAPI.put(`usernames`, [data.created_by]);
-			if (response.data.result !== "OK") {
-				throw new Error(t("TenantDetailContainer|Something went wrong, failed to fetch assigned credentials"));
-			}
-			setUsername(response.data.data[data.created_by]);
-		} catch (e) {
-			console.error(e);
-			props.app.addAlert("warning", `${t("TenantDetailContainer|Something went wrong, failed to fetch assigned credentials")}. ${e?.response?.data?.message}`, 30);
-		}
-	}
-
 	const retrieveAssignedCredentials = async () => {
 		try {
 			let response = await SeaCatAuthAPI.get(`/credentials?m=tenant&f=${tenant_id}`, {params: {p:page, i: limit}});

src/modules/home/index.js

@@ -1,5 +1,9 @@
-import HomeContainer from './containers/HomeContainer'
+import { lazy } from 'react';
+import { componentLoader } from 'asab-webui';
 import Module from 'asab-webui/abc/Module';
+
+const HomeContainer = lazy(() => componentLoader(() => import('./containers/HomeContainer')));
+
 import "./containers/home.scss";
 
 export default class HomeModule extends Module {