fix: preserve cached data during refresh failures

src/pages/account/ui/AccountPage.view.tsx

@@ -3,6 +3,7 @@ import {
 	Button,
 	Card,
 	Group,
+	Loader,
 	Paper,
 	SimpleGrid,
 	Stack,
@@ -93,15 +94,26 @@ export function AccountPageEmpty({
 	account,
 	accountId,
 	accessToken = null,
+	refreshing = false,
+	refreshError = false,
+	retry,
 }: {
 	account?: BrokerageAccount;
 	accountId?: string;
 	accessToken?: string | null;
+	refreshing?: boolean;
+	refreshError?: boolean;
+	retry?: () => void;
 }) {
 	const { t } = useTranslation();
 	return (
 		<Stack>
 			<AccountHeading account={account} />
+			<PortfolioRefreshState
+				refreshing={refreshing}
+				refreshError={refreshError}
+				retry={retry}
+			/>
 			<StateView
 				title={t("portfolio.emptyTitle")}
 				text={t("portfolio.emptyText")}
@@ -116,11 +128,17 @@ export function AccountPageLoaded({
 	accountId,
 	accessToken,
 	portfolio,
+	refreshing = false,
+	refreshError = false,
+	retry,
 }: {
 	account?: BrokerageAccount;
 	accountId?: string;
 	accessToken?: string | null;
 	portfolio: Portfolio;
+	refreshing?: boolean;
+	refreshError?: boolean;
+	retry?: () => void;
 }) {
 	const { t } = useTranslation();
 	const stocks = portfolio.positions.filter((p) => p.type === "STOCK");
@@ -140,6 +158,11 @@ export function AccountPageLoaded({
 	return (
 		<Stack className={classes.page} gap="lg">
 			<AccountHeading account={account} />
+			<PortfolioRefreshState
+				refreshing={refreshing}
+				refreshError={refreshError}
+				retry={retry}
+			/>
 			{portfolio.isStale ? (
 				<Alert color="blue">{t("portfolio.staleWarning")}</Alert>
 			) : null}
@@ -197,6 +220,40 @@ export function AccountPageLoaded({
 		</Stack>
 	);
 }
+function PortfolioRefreshState({
+	refreshing,
+	refreshError,
+	retry,
+}: {
+	refreshing: boolean;
+	refreshError: boolean;
+	retry?: () => void;
+}) {
+	const { t } = useTranslation();
+	if (!refreshing && !refreshError) return null;
+	return (
+		<>
+			{refreshing ? (
+				<Group gap="xs" role="status" aria-label={t("portfolio.refreshing")}>
+					<Loader size="sm" />
+					<Text c="dimmed" size="sm">
+						{t("portfolio.refreshing")}
+					</Text>
+				</Group>
+			) : null}
+			{refreshError ? (
+				<Alert color="orange">
+					<Stack gap="sm">
+						<Text>{t("portfolio.refreshError")}</Text>
+						<Button onClick={retry} variant="light">
+							{t("accounts.retry")}
+						</Button>
+					</Stack>
+				</Alert>
+			) : null}
+		</>
+	);
+}
 function RecentOperations({
 	accountId,
 	accessToken,