fix: Loader is missing when switching between pages gf-119 (#127)

* fix: loader styles gf-119

* fix: access mannagement route location gf-119

* fix: loader position on projects page gf-119

* refactor: create is-data-loading helper gf-119

* fix: add loader to access management page gf-119

* refactor: rid of extra nesting in helpers folder gf-119

* refactor: rid of 'is-data-loading' helper gf-119

* refactor: move Loader to PageLayout gf-119

apps/frontend/src/index.tsx

@@ -34,6 +34,14 @@ createRoot(document.querySelector("#root") as HTMLElement).render(
 								),
 								path: AppRoute.ROOT,
 							},
+							{
+								element: (
+									<ProtectedRoute>
+										<AccessManagement />
+									</ProtectedRoute>
+								),
+								path: AppRoute.ACCESS_MANAGEMENT,
+							},
 							{
 								element: <Auth />,
 								path: AppRoute.SIGN_IN,
@@ -50,17 +58,8 @@ createRoot(document.querySelector("#root") as HTMLElement).render(
 						element: <NotFound />,
 						path: AppRoute.ANY,
 					},
-					{
-						element: (
-							<ProtectedRoute>
-								<AccessManagement />
-							</ProtectedRoute>
-						),
-						path: AppRoute.ACCESS_MANAGEMENT,
-					},
 				]}
 			/>
-
 			<ToastContainer />
 		</StoreProvider>
 	</StrictMode>,

apps/frontend/src/libs/components/loader/styles.module.css

@@ -27,11 +27,11 @@
 	border-radius: 50%;
 	opacity: 0;
 	transform: translate(-50%, -50%) scale(0);
-	animation: puff var(--animation-time) linear infinite;
+	animation: puff var(--animation-duration) linear infinite;
 }
 
 .loader::after {
-	animation-delay: calc(var(--animation-time) / -2);
+	animation-delay: calc(var(--animation-duration) / -2);
 }
 
 @keyframes puff {

apps/frontend/src/libs/components/page-layout/page-layout.tsx

@@ -1,13 +1,17 @@
-import { Header, Sidebar } from "~/libs/components/components.js";
+import { Header, Loader, Sidebar } from "~/libs/components/components.js";
 import { SIDEBAR_ITEMS } from "~/libs/constants/constants.js";
 
 import styles from "./styles.module.css";
 
 type Properties = {
 	children: React.ReactNode;
+	isLoading?: boolean;
 };
 
-const PageLayout = ({ children }: Properties): JSX.Element => {
+const PageLayout = ({
+	children,
+	isLoading = false,
+}: Properties): JSX.Element => {
 	return (
 		<div className={styles["page"]}>
 			<div className={styles["page-header"]}>
@@ -17,7 +21,9 @@ const PageLayout = ({ children }: Properties): JSX.Element => {
 				<aside className={styles["page-sidebar"]}>
 					<Sidebar items={SIDEBAR_ITEMS} />
 				</aside>
-				<main className={styles["page-content"]}>{children}</main>
+				<main className={styles["page-content"]}>
+					{isLoading ? <Loader /> : <>{children}</>}
+				</main>
 			</div>
 		</div>
 	);

apps/frontend/src/libs/helpers/helpers.ts

@@ -1,2 +1,2 @@
-export { getValidClassNames } from "./get-valid-classes/get-valid-classes.helper.js";
+export { getValidClassNames } from "./get-valid-classes.helper.js";
 export { configureString, formatDate } from "@git-fit/shared";

apps/frontend/src/pages/access-management/access-management.tsx

@@ -1,4 +1,5 @@
 import { PageLayout, Table } from "~/libs/components/components.js";
+import { DataStatus } from "~/libs/enums/enums.js";
 import {
 	useAppDispatch,
 	useAppSelector,
@@ -13,7 +14,7 @@ import styles from "./styles.module.css";
 
 const AccessManagement = (): JSX.Element => {
 	const dispatch = useAppDispatch();
-	const users = useAppSelector(({ users }) => users.users);
+	const { dataStatus, users } = useAppSelector(({ users }) => users);
 
 	useEffect(() => {
 		void dispatch(userActions.loadAll());
@@ -22,8 +23,11 @@ const AccessManagement = (): JSX.Element => {
 	const columns = getUserColumns();
 	const data: UserRow[] = getUserRows(users);
 
+	const isLoading =
+		dataStatus === DataStatus.IDLE || dataStatus === DataStatus.PENDING;
+
 	return (
-		<PageLayout>
+		<PageLayout isLoading={isLoading}>
 			<p className={styles["title"]}>Access Management</p>
 			<p className={styles["sub-title"]}>Users</p>
 			<Table<UserRow> columns={columns} data={data} />

apps/frontend/src/pages/projects/projects.tsx

@@ -1,4 +1,4 @@
-import { Loader, PageLayout } from "~/libs/components/components.js";
+import { PageLayout } from "~/libs/components/components.js";
 import { DataStatus } from "~/libs/enums/enums.js";
 import {
 	useAppDispatch,
@@ -20,22 +20,16 @@ const Projects = (): JSX.Element => {
 	}, [dispatch]);
 
 	const isLoading =
-		dataStatus === DataStatus.PENDING || dataStatus === DataStatus.IDLE;
+		dataStatus === DataStatus.IDLE || dataStatus === DataStatus.PENDING;
 
 	return (
-		<PageLayout>
-			<h1 className={styles["title"]}>Projects</h1>
-			{isLoading ? (
-				<div className={styles["projects-loader"]}>
-					<Loader />
-				</div>
-			) : (
-				<div className={styles["projects-list"]}>
-					{projects.map((project) => (
-						<ProjectCard key={project.id} project={project} />
-					))}
-				</div>
-			)}
+		<PageLayout isLoading={isLoading}>
+			<h1 className={styles["label"]}>Projects</h1>
+			<div className={styles["projects-list"]}>
+				{projects.map((project) => (
+					<ProjectCard key={project.id} project={project} />
+				))}
+			</div>
 		</PageLayout>
 	);
 };

apps/frontend/src/pages/projects/styles.module.css

@@ -11,9 +11,3 @@
 	gap: 12px;
 	padding: 20px 0;
 }
-
-.projects-loader {
-	display: flex;
-	flex: 1;
-	align-items: center;
-}