refactor: enforce frontend view model boundaries

src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.test.tsx

@@ -24,8 +24,10 @@ import { server } from "@/test/server";
 
 import { AccountOperationsPage } from "./AccountOperationsPage";
 
-const operation: BrokerageOperation = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
-	{
+/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+
+const operation: BrokerageOperation
+	= {
 		accruedInterest: null,
 		category: "trade",
 		commission: { currency: "RUB", value: "1" },
@@ -41,18 +43,21 @@ const operation: BrokerageOperation = (/* eslint-disable unicorn/no-null -- Fixt
 		quantity: "2",
 		ticker: "SBER",
 		type: "OPERATION_TYPE_BUY",
-	}
-/* eslint-enable unicorn/no-null */);
+	};
+/* eslint-enable unicorn/no-null */
 
 const Navigation: FC = () => {
 	const location = useLocation();
 	const navigate = useNavigate();
+
 	return (
 		<>
 			<output aria-label="URL">{location.search}</output>
+
 			<button onClick={() => navigate(-1)} type="button">
 				History back
 			</button>
+
 			<button onClick={() => navigate(1)} type="button">
 				History forward
 			</button>
@@ -225,6 +230,7 @@ describe("AccountOperationsPage", () => {
 					"*/api/v1/brokerage-accounts/:accountId/operations",
 					({ request }) => {
 						searches.push(new URL(request.url).searchParams);
+
 						return HttpResponse.json(
 							resource({
 								hasNext: true,
@@ -249,6 +255,7 @@ describe("AccountOperationsPage", () => {
 							initialIndex={0}
 						>
 							<Navigation />
+
 							<Routes>
 								<Route
 									element={<AccountOperationsPage />}
@@ -262,6 +269,7 @@ describe("AccountOperationsPage", () => {
 			await screen.findByLabelText("Период");
 			expect(searches[0].get("from")).toBeNull();
 			expect(searches[0].get("to")).toBeNull();
+
 			for (const expected of [
 				"?categories=trade",
 				"?categories=trade",
@@ -276,6 +284,7 @@ describe("AccountOperationsPage", () => {
 				);
 				await screen.findByLabelText("Период");
 			}
+
 			expect(searches.at(-1)?.get("from")).toBe("2026-02-01T00:00:00.000Z");
 			expect(searches.at(-1)?.get("to")).toBeNull();
 			fireEvent.click(screen.getByRole("button", { name: "Далее" }));
@@ -313,9 +322,11 @@ describe("AccountOperationsPage", () => {
 						new URL(request.url).searchParams.has("from")
 							? HttpResponse.json({ code: "VALIDATION_ERROR" }, { status: 400 })
 							: HttpResponse.json(
-									resource((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
-										{ hasNext: false, items: [], nextCursor: null }
-										/* eslint-enable unicorn/no-null */)),
+									/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+									resource(
+										{ hasNext: false, items: [], nextCursor: null },
+										/* eslint-enable unicorn/no-null */
+									),
 								),
 				),
 			);
@@ -328,6 +339,7 @@ describe("AccountOperationsPage", () => {
 							]}
 						>
 							<Navigation />
+
 							<Routes>
 								<Route
 									element={<AccountOperationsPage />}
@@ -354,16 +366,19 @@ describe("AccountOperationsPage", () => {
 				({ request }) => {
 					const url = new URL(request.url);
 					searches.push(url.search);
+
 					return HttpResponse.json(
-						resource((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+						/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+						resource(
 							{
 								accountId: "account-1",
 								hasNext: !url.searchParams.get("cursor"),
 								items: [operation],
 								nextCursor: url.searchParams.get("cursor") ? null : "next-1",
 								observedAt: "2026-08-14T00:00:00Z",
-							}
-							/* eslint-enable unicorn/no-null */)),
+							},
+							/* eslint-enable unicorn/no-null */
+						),
 					);
 				},
 			),
@@ -394,16 +409,19 @@ describe("AccountOperationsPage", () => {
 				({ request }) => {
 					const url = new URL(request.url);
 					searches.push(url.search);
+
 					return HttpResponse.json(
-						resource((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+						/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+						resource(
 							{
 								accountId: "account-1",
 								hasNext: false,
 								items: [operation],
 								nextCursor: null,
 								observedAt: "2026-08-14T00:00:00Z",
-							}
-							/* eslint-enable unicorn/no-null */)),
+							},
+							/* eslint-enable unicorn/no-null */
+						),
 					);
 				},
 			),
@@ -431,16 +449,19 @@ describe("AccountOperationsPage", () => {
 				({ request }) => {
 					const url = new URL(request.url);
 					searches.push(url.search);
+
 					return HttpResponse.json(
-						resource((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+						/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+						resource(
 							{
 								accountId: "account-1",
 								hasNext: false,
 								items: [operation],
 								nextCursor: null,
 								observedAt: "2026-08-14T00:00:00Z",
-							}
-							/* eslint-enable unicorn/no-null */)),
+							},
+							/* eslint-enable unicorn/no-null */
+						),
 					);
 				},
 			),
@@ -484,17 +505,26 @@ it("keeps UTC operation boundaries in GET and source sync requests", async () =>
 			"*/api/v1/brokerage-accounts/:accountId/operations",
 			({ request }) => {
 				requested.push(Object.fromEntries(new URL(request.url).searchParams));
+
 				return HttpResponse.json(
-					resource(null, (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+					resource(
+						/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
+						null,
 						{
-							sync: { errorCode: "TBANK_UNAVAILABLE", id: null, state: "failed" },
-						}
-						/* eslint-enable unicorn/no-null */)),
+							sync: {
+								errorCode: "TBANK_UNAVAILABLE",
+								id: null,
+								state: "failed",
+							},
+						},
+						/* eslint-enable unicorn/no-null */
+					),
 				);
 			},
 		),
 		http.post("*/api/v1/tbank-sync", async ({ request }) => {
 			syncRequests.push(await request.json());
+
 			return HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 });
 		}),
 	);
@@ -529,16 +559,15 @@ it("does not label incomplete empty operations as a confirmed empty period", asy
 	server.use(
 		http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
 			HttpResponse.json(
+				/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
 				resource(
-					(/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */
-						{
-							accountId: "account-1",
-							hasNext: false,
-							items: [],
-							nextCursor: null,
-						}
-					/* eslint-enable unicorn/no-null */),
-					{ availability: "partial" },
+					{
+						accountId: "account-1",
+						hasNext: false,
+						items: [],
+						nextCursor: null,
+					},
+					/* eslint-enable unicorn/no-null */ { availability: "partial" },
 				),
 			),
 		),
@@ -562,6 +591,7 @@ it("recovers an invalid cursor at the first page without clearing applied filter
 						{ code: "INVALID_OPERATIONS_CURSOR" },
 						{ status: 400 },
 					);
+
 				return HttpResponse.json(
 					resource({
 						hasNext: true,

src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.tsx

@@ -14,7 +14,13 @@ const AccountOperationsPage: FC<AccountOperationsPageProps> = (props) => {
 		return <AccountOperationsPageLoading />;
 	}
 
-	return viewModel.state === "error" ? <AccountOperationsPageError {...viewModel} /> : <AccountOperationsPageLoaded {...viewModel} />;
+	return viewModel.state === "error"
+		? (
+				<AccountOperationsPageError {...viewModel} />
+			)
+		: (
+				<AccountOperationsPageLoaded {...viewModel} />
+			);
 };
 
 export { AccountOperationsPage };

src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.vm.ts

@@ -1,7 +1,6 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { useParams, useSearchParams } from "react-router";
-import { z } from "zod";
 
 import {
 	type BrokerageOperation,
@@ -12,6 +11,7 @@ import {
 } from "@/entities/broker-operation";
 import { useScreenSync } from "@/features/tbank-connection";
 import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
+import { isValidPeriod } from "@/shared/lib";
 
 type AccountOperationsPageViewModel
 	= | {
@@ -51,30 +51,44 @@ const useAccountOperationsPageVm = (
 	const urlFrom = searchParameters.get("from");
 	const urlTo = searchParameters.get("to");
 	const isValidUrlPeriod = isValidPeriod(urlFrom, urlTo);
-	const appliedFrom = isValidUrlPeriod ? urlFrom : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
-	const appliedTo = isValidUrlPeriod ? urlTo : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
+
+	const appliedFrom = isValidUrlPeriod
+		? urlFrom
+		: null; // eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model.
+
+	const appliedTo = isValidUrlPeriod
+		? urlTo
+		: null; // eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model.
+
 	const appliedCategories = operationCategories.filter(category =>
 		(searchParameters.get("categories") ?? "").split(",").includes(category),
 	);
+
 	const [draftFrom, setDraftFrom] = useState<null | string>(appliedFrom);
 	const [draftTo, setDraftTo] = useState<null | string>(appliedTo);
+
 	const [draftCategories, setDraftCategories]
 		= useState<OperationCategory[]>(appliedCategories);
+
 	const scopeKey = JSON.stringify([
 		accountId,
 		urlFrom,
 		urlTo,
 		appliedCategories,
 	]);
+
 	const [pagination, setPagination] = useState<{
 		cursors: string[];
 		scopeKey: string;
 	}>({ cursors: [], scopeKey });
+
 	const cursors = pagination.scopeKey === scopeKey ? pagination.cursors : [];
 	const cursor = cursors.at(-1);
+
 	if (pagination.scopeKey !== scopeKey) {
 		setPagination({ cursors: [], scopeKey });
 	}
+
 	useEffect(() => {
 		if (isValidUrlPeriod) return;
 		const normalized = new URLSearchParams(searchParameters);
@@ -83,38 +97,52 @@ const useAccountOperationsPageVm = (
 		setSearchParameters(normalized, { replace: true });
 	}, [isValidUrlPeriod, searchParameters, setSearchParameters]);
 	const [previousSearch, setPreviousSearch] = useState(searchParameters);
+
 	if (previousSearch !== searchParameters) {
 		setPreviousSearch(searchParameters);
 		setDraftFrom(appliedFrom);
 		setDraftTo(appliedTo);
 		setDraftCategories(
 			operationCategories.filter(category =>
-				(searchParameters.get("categories") ?? "").split(",").includes(category),
+				(searchParameters.get("categories") ?? "")
+					.split(",")
+					.includes(category),
 			),
 		);
 	}
+
 	const firstPageQuery = {
 		from: dateStart(appliedFrom),
 		to: dateEnd(appliedTo),
-		...((appliedCategories.length > 0) && { categories: appliedCategories }),
+		...(appliedCategories.length > 0 && { categories: appliedCategories }),
 		limit: 100,
 	};
+
 	const operations = useBrokerageOperations(accountId, {
 		...firstPageQuery,
 		...(cursor && { cursor }),
 	});
+
 	const sync = useScreenSync(
 		{ accountId, screen: "operations", ...firstPageQuery },
 		[operations],
 	);
+
 	if (operations.isLoading) return { state: "loading" };
+
 	const resetQueryKey = brokerageOperationsQueryOptions(accountId, {
 		limit: 100,
 	}).queryKey;
 
 	const resetCursors = () => setPagination({ cursors: [], scopeKey });
+
 	const retry = () => {
-		if (isApiErrorCode(apiErrorCode(operations.error), ApiErrorCode.InvalidOperationsCursor)) {
+		if (
+			isApiErrorCode(
+				apiErrorCode(operations.error),
+				ApiErrorCode.InvalidOperationsCursor,
+			)
+		) {
 			void queryClient.invalidateQueries({
 				exact: true,
 				queryKey: brokerageOperationsQueryOptions(accountId, firstPageQuery)
@@ -124,6 +152,7 @@ const useAccountOperationsPageVm = (
 		}
 		else void sync.retry();
 	};
+
 	const onReset = () => {
 		setDraftFrom(null);
 		setDraftTo(null);
@@ -136,7 +165,10 @@ const useAccountOperationsPageVm = (
 	if (
 		(operations.isError || operations.meta?.sync.state === "failed")
 		&& (!operations.data
-			|| isApiErrorCode(apiErrorCode(operations.error), ApiErrorCode.InvalidOperationsCursor))
+			|| isApiErrorCode(
+				apiErrorCode(operations.error),
+				ApiErrorCode.InvalidOperationsCursor,
+			))
 	)
 		return { onReset, retry, state: "error" };
 	if (!operations.data) return { state: "loading" };
@@ -164,7 +196,9 @@ const useAccountOperationsPageVm = (
 			setSearchParameters({
 				...(draftFrom && { from: draftFrom }),
 				...(draftTo && { to: draftTo }),
-				...((draftCategories.length > 0) && { categories: draftCategories.join(",") }),
+				...(draftCategories.length > 0 && {
+					categories: draftCategories.join(","),
+				}),
 			});
 			resetCursors();
 		},
@@ -187,7 +221,6 @@ const useAccountOperationsPageVm = (
 	};
 };
 
-const calendarDate = z.iso.date();
 function dateEnd(value: null | string) {
 	return value ? `${value}T23:59:59.999Z` : undefined;
 }
@@ -200,13 +233,4 @@ function isSameCategories(a: OperationCategory[], b: OperationCategory[]) {
 	return a.length === b.length && a.every(value => b.includes(value));
 }
 
-function isValidPeriod(from: null | string, to: null | string) {
-	return (
-		[from, to].every(
-			date => date === null || calendarDate.safeParse(date).success,
-		)
-		&& (!from || !to || from <= to)
-	);
-}
-
 export { type AccountOperationsPageViewModel, useAccountOperationsPageVm };

src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageError.view.tsx

@@ -22,6 +22,7 @@ const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
 			action={(
 				<Group>
 					<Button onClick={retry}>{t("ledger.retry")}</Button>
+
 					<Button onClick={props.onReset} variant="default">
 						{t("ledger.reset")}
 					</Button>

src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { FC } from "react";
 
 import {
 	Alert,
@@ -14,120 +14,114 @@ import { DatePickerInput } from "@mantine/dates";
 import { StateView } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
-import {
-	LedgerEntryRow,
-	operationCategories,
-	type OperationCategory,
-} from "@/entities/broker-operation";
+import { LedgerEntryRow } from "@/entities/broker-operation";
 import { formatSnapshotTime } from "@/shared/lib";
 
 import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
 
+import { useAccountOperationsPageLoadedVm } from "./AccountOperationsPageLoaded.vm";
+
 type AccountOperationsPageLoadedProps = Extract<
 	AccountOperationsPageViewModel,
 	{ state: "loaded" }
 >;
 
-const operationCategorySet = new Set<string>(operationCategories);
+const AccountOperationsPageLoadedOperations: FC<
+	AccountOperationsPageLoadedProps
+> = (props) => { // eslint-disable-line sonarjs/function-return-type -- React renders elements and lists.
+	const { t } = useTranslation();
 
-function fromMultiSelectValue(value: string[]) {
-	return value.filter((item): item is OperationCategory =>
-		operationCategorySet.has(item),
+	const { items } = props;
+
+	if (items.length > 0) {
+		return items.map(operation => (
+			<LedgerEntryRow
+				key={JSON.stringify([
+					operation.account?.id,
+					operation.id,
+					operation.logoName,
+				])}
+				operation={operation}
+			/>
+		));
+	}
+
+	if (props.partial) {
+		return;
+	}
+
+	return (
+		<StateView text={t("ledger.emptyText")} title={t("ledger.emptyTitle")} />
 	);
-}
+};
 
 const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 	props,
 ) => {
 	const {
 		canApply,
+		categoryData,
 		draftCategories,
 		draftFrom,
 		draftTo,
 		hasNext,
 		hasPrevious,
-		items,
 		onApply,
-		onDraftCategoriesChange,
-		onDraftFromChange,
-		onDraftToChange,
+		onCategoriesChange,
 		onNext,
+		onPeriodChange,
 		onPrevious,
 		onReset,
-	} = props;
-	const { t } = useTranslation();
+		t,
+	} = useAccountOperationsPageLoadedVm(props);
 
-	const categoryData = operationCategories.map(category => ({
-		label: t(`ledger.category.${category}`),
-		value: category,
-	}));
-
-	// eslint-disable-next-line sonarjs/function-return-type -- ReactNode deliberately includes lists, elements and empty output.
-	function renderOperations(): ReactNode {
-		if (items.length > 0) {
-			return items.map(operation => (
-				<LedgerEntryRow
-					key={JSON.stringify([
-						operation.account?.id,
-						operation.id,
-						operation.logoName,
-					])}
-					operation={operation}
-				/>
-			));
-		}
-		if (props.partial) {
-			return;
-		}
-		return (
-			<StateView
-				text={t("ledger.emptyText")}
-				title={t("ledger.emptyTitle")}
-			/>
-		);
-	}
 	return (
 		<Stack gap="lg">
-			{!!(props.lastSuccessfulAt) && ((
+			{!!props.lastSuccessfulAt && (
 				<Text c="dimmed" size="xs">
 					{t("investment.sourceTime", {
 						date: formatSnapshotTime(props.lastSuccessfulAt),
 					})}
 				</Text>
-			))}
+			)}
+
 			<Title order={1}>{t("ledger.title")}</Title>
+
 			<Button disabled={props.refreshing} onClick={props.retry} w="fit-content">
 				{t("investment.refresh")}
 			</Button>
-			{!!(props.partial) && ((
+
+			{!!props.partial && (
 				<Alert role="status">{t("investment.partial")}</Alert>
-			))}
-			{!!(props.historyLoading) && (<Alert>{t("investment.history")}</Alert>)}
-			{!!(props.refreshing) && ((
+			)}
+
+			{!!props.historyLoading && <Alert>{t("investment.history")}</Alert>}
+
+			{!!props.refreshing && (
 				<Progress animated aria-label={t("accounts.refreshing")} value={100} />
-			))}
-			{!!(props.refreshError) && ((
+			)}
+
+			{!!props.refreshError && (
 				<Alert aria-live="polite" color="yellow" role="status">
 					{t(
 						props.sourceError
 							? "investment.syncFailed"
 							: "accounts.refreshError",
 					)}
+
 					<Button onClick={props.retry} variant="subtle">
 						{t("accounts.retry")}
 					</Button>
 				</Alert>
-			))}
+			)}
+
 			<Group align="end">
 				<DatePickerInput
 					allowSingleDateInRange
 					clearable
 					clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
 					label={t("ledger.period")}
-					onChange={([from, to]) => {
-						onDraftFromChange(from);
-						onDraftToChange(to);
-					}}
+					onChange={onPeriodChange}
 					popoverProps={{
 						middlewares: { shift: { crossAxis: true } },
 						returnFocus: true,
@@ -137,35 +131,40 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 					valueFormat="DD.MM.YYYY"
 				/>
 			</Group>
+
 			<MultiSelect
 				clearable
 				clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
 				data={categoryData}
 				label={t("ledger.categories")}
-				onChange={value =>
-					onDraftCategoriesChange(fromMultiSelectValue(value))}
+				onChange={onCategoriesChange}
 				placeholder={t("ledger.categoriesPlaceholder")}
 				value={draftCategories}
 			/>
+
 			<Group>
 				<Button disabled={!canApply} onClick={onApply}>
 					{t("ledger.apply")}
 				</Button>
+
 				<Button onClick={onReset} variant="default">
 					{t("ledger.reset")}
 				</Button>
 			</Group>
-			{renderOperations()}
-			{!!(hasNext || hasPrevious) && ((
+
+			<AccountOperationsPageLoadedOperations {...props} />
+
+			{!!(hasNext || hasPrevious) && (
 				<Group justify="space-between">
 					<Button disabled={!hasPrevious} onClick={onPrevious}>
 						{t("ledger.previous")}
 					</Button>
+
 					<Button disabled={!hasNext} onClick={onNext}>
 						{t("ledger.next")}
 					</Button>
 				</Group>
-			))}
+			)}
 		</Stack>
 	);
 };

src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.vm.ts

@@ -0,0 +1,78 @@
+import { useTranslation } from "react-i18next";
+
+import {
+	operationCategories,
+	type OperationCategory,
+} from "@/entities/broker-operation";
+
+import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
+
+type AccountOperationsPageLoadedProps = Extract<
+	AccountOperationsPageViewModel,
+	{ state: "loaded" }
+>;
+
+const operationCategorySet = new Set<string>(operationCategories);
+
+function fromMultiSelectValue(value: string[]) {
+	return value.filter((item): item is OperationCategory =>
+		operationCategorySet.has(item),
+	);
+}
+
+function useAccountOperationsPageLoadedVm(
+	props: AccountOperationsPageLoadedProps,
+) {
+	const {
+		canApply,
+		draftCategories,
+		draftFrom,
+		draftTo,
+		hasNext,
+		hasPrevious,
+		onApply,
+		onDraftCategoriesChange,
+		onDraftFromChange,
+		onDraftToChange,
+		onNext,
+		onPrevious,
+		onReset,
+	} = props;
+
+	const { t } = useTranslation();
+
+	const categoryData = operationCategories.map(category => ({
+		label: t(`ledger.category.${category}`),
+		value: category,
+	}));
+
+	const onPeriodChange: (value: [null | string, null | string]) => void = ([
+		from,
+		to,
+	]) => {
+		onDraftFromChange(from);
+		onDraftToChange(to);
+	};
+
+	const onCategoriesChange: (value: string[]) => void = value =>
+		onDraftCategoriesChange(fromMultiSelectValue(value));
+
+	return {
+		canApply,
+		categoryData,
+		draftCategories,
+		draftFrom,
+		draftTo,
+		hasNext,
+		hasPrevious,
+		onApply,
+		onCategoriesChange,
+		onNext,
+		onPeriodChange,
+		onPrevious,
+		onReset,
+		t,
+	};
+}
+
+export { useAccountOperationsPageLoadedVm };

src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoading.view.tsx

@@ -12,15 +12,21 @@ const AccountOperationsPageLoading: FC = () => {
 	return (
 		<LoadingSkeleton label={t("states.loadingTitle")}>
 			<Skeleton height={32} width="40%" />
+
 			<Group grow>
 				<Skeleton height={48} radius="sm" />
+
 				<Skeleton height={48} radius="sm" />
 			</Group>
+
 			<Skeleton height={48} radius="sm" />
+
 			<Group>
 				<Skeleton height={36} radius="sm" width={110} />
+
 				<Skeleton height={36} radius="sm" width={110} />
 			</Group>
+
 			<Stack gap="xs">
 				{skeletonRowIds.map(id => (
 					<Skeleton height={64} key={id} radius="md" />