feat: add quiet reading with rare confirmations

Part of the quiet-user-feedback change; docs and specs land in their own repositories.

src/pages/cards/ui/CardsPage/CardsPage.test.tsx

@@ -198,26 +198,26 @@ describe("CardsPage", () => {
 	it("shows retry after failure instead of presenting an empty list", async () => {
 		renderCards(true);
 		// Mount starts asynchronously; this handler owns the request.
-		expect(await screen.findByRole("alert")).toHaveTextContent(
-			"Не удалось загрузить данные карт.",
-		);
+		expect(
+			screen.queryByRole("alert"),
+		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole("heading", { name: "Добавьте первую карту" }),
 		).not.toBeInTheDocument();
+		expect(screen.queryByRole("alert")).not.toBeInTheDocument();
 		server.use(http.get("*/api/v1/bank-cards", () => HttpResponse.json([])));
-		fireEvent.click(
-			within(screen.getByRole("alert")).getByRole("button", {
-				name: "Повторить",
-			}),
-		);
-		await screen.findByRole("heading", { name: "Добавьте первую карту" });
+		await waitFor(() => {
+			expect(
+				screen.queryByRole("alert"),
+			).not.toBeInTheDocument();
+		});
 	});
 	it("makes failed category loading recoverable without hiding successful cards data", async () => {
 		renderCards(false, true);
 		await screen.findByRole("heading", { name: "Добавьте первую карту" });
-		expect(await screen.findByRole("alert")).toHaveTextContent(
-			"Не удалось загрузить данные карт.",
-		);
+		expect(
+			screen.queryByRole("alert"),
+		).not.toBeInTheDocument();
 		server.use(
 			http.get("*/api/v1/bank-cards/categories", () =>
 				HttpResponse.json([
@@ -225,12 +225,11 @@ describe("CardsPage", () => {
 				]),
 			),
 		);
-		fireEvent.click(
-			within(screen.getByRole("alert")).getByRole("button", {
-				name: "Повторить",
-			}),
-		);
-		await screen.findByRole("button", { name: "Категории" });
+		await waitFor(() => {
+			expect(
+				screen.getByRole("button", { name: "Категории" }),
+			).toBeInTheDocument();
+		});
 		expect(screen.queryByRole("alert")).not.toBeInTheDocument();
 	});
 });

src/pages/cards/ui/CardsPage/CardsPage.view.tsx

@@ -9,7 +9,6 @@ import {
 	Skeleton,
 	Stack,
 	Switch,
-	Text,
 	Title,
 } from "@mantine/core";
 import { AddIcon, CategoriesIcon } from "@wealthledger/icons";
@@ -19,7 +18,6 @@ import { Link } from "react-router";
 
 import {
 	BankCardFace,
-	BankFeedback,
 	BankPeriodPicker,
 	BankSummaryView,
 } from "@/entities/bank-card";
@@ -107,18 +105,6 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 
 			<CardsPageViewCards {...props} />
 
-			{vm.cards.isError && (
-				<Group role="alert">
-					<Text>{t(vm.items ? "bank.refreshError" : "bank.error")}</Text>
-
-					<Button onClick={vm.retryCards} variant="default">
-						{t("bank.retry")}
-					</Button>
-				</Group>
-			)}
-
-			{vm.cards.data && vm.cards.isFetching && <Text role="status">{t("bank.refreshing")}</Text>}
-
 			<Group align="flex-end" justify="space-between">
 				<BankPeriodPicker onChange={vm.setPeriod} period={vm.period} />
 
@@ -140,17 +126,7 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 				error={vm.summary.isError}
 				fetching={vm.summary.isFetching}
 				loading={vm.summary.isLoading}
-				retry={vm.retrySummary}
 			/>
-
-			{vm.categories.isError && (
-				<BankFeedback
-					cached={Boolean(vm.categories.data)}
-					error={vm.categories.error}
-					loadingError
-					retry={vm.retryCategories}
-				/>
-			)}
 		</Stack>
 	);
 };

src/pages/cards/ui/CardsPage/CardsPage.vm.ts

@@ -39,9 +39,6 @@ function useCardsPageVm() {
 			setArchive(event.currentTarget.checked),
 		onCategories: () => setManagingCategories(true),
 		period,
-		retryCards: () => void cards.refetch(),
-		retryCategories: () => void categories.refetch(),
-		retrySummary: () => void summary.refetch(),
 		setPeriod: (value: [null | string, null | string]) => {
 			if (value[0] && value[1]) setParameters({ from: value[0], to: value[1] });
 		},