fix: stabilize frontend query cache contracts

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

@@ -68,6 +68,16 @@ export function AccountOperationsPage() {
 				}
 			/>
 		);
+	if (!operations.data)
+		return (
+			<StateView
+				loading
+				title={t("states.loadingTitle")}
+				text={t("states.loadingText")}
+			/>
+		);
+	const { data } = operations;
+	const nextCursor = data.nextCursor;
 	return (
 		<Stack maw={960} gap="lg">
 			<Title order={1}>{t("ledger.title")}</Title>
@@ -109,8 +119,8 @@ export function AccountOperationsPage() {
 					))}
 				</Group>
 			</Checkbox.Group>
-			{operations.data.items.length ? (
-				operations.data.items.map((operation) => (
+			{data.items.length ? (
+				data.items.map((operation) => (
 					<OperationRow key={operation.id} operation={operation} />
 				))
 			) : (
@@ -119,7 +129,7 @@ export function AccountOperationsPage() {
 					text={t("ledger.emptyText")}
 				/>
 			)}
-			{operations.data.hasNext || cursors.length ? (
+			{data.hasNext || cursors.length ? (
 				<Group justify="space-between">
 					<Button
 						disabled={!cursors.length}
@@ -128,11 +138,10 @@ export function AccountOperationsPage() {
 						{t("ledger.previous")}
 					</Button>
 					<Button
-						disabled={!operations.data.hasNext || !operations.data.nextCursor}
-						onClick={() =>
-							operations.data.nextCursor &&
-							setCursors((value) => [...value, operations.data.nextCursor])
-						}
+						disabled={!data.hasNext || !nextCursor}
+						onClick={() => {
+							if (nextCursor) setCursors((value) => [...value, nextCursor]);
+						}}
 					>
 						{t("ledger.next")}
 					</Button>