diff --git a/src/app/routes/dashboard/operators/operator.tsx b/src/app/routes/dashboard/operators/operator.tsx
index 649107d72..5ac865e8e 100644
--- a/src/app/routes/dashboard/operators/operator.tsx
+++ b/src/app/routes/dashboard/operators/operator.tsx
@@ -19,15 +19,43 @@ import { IncreaseOperatorFeeStatusBadge } from "@/components/operator/increase-o
import { OperatorValidatorsList } from "@/components/operator/operator-validators-list";
import { OperatorStatusBadge } from "@/components/operator/operator-status-badge";
import { useOperatorEarningsAndFees } from "@/hooks/operator/use-operator-earnings-and-fees";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const AmountSkeleton: FC<{ "data-testid"?: string }> = (props) => (
+
+
+
+
+);
+
+const AmountUnavailable: FC<{ "data-testid"?: string }> = (props) => (
+
+
+ Couldn't read this value from the network.
+
+
+ It will appear once the connection recovers.
+
+
+);
export const Operator: FC> = ({ ...props }) => {
const params = useOperatorPageParams();
const operatorId = BigInt(params.operatorId!);
const operator = useOperator(operatorId!);
- const { feeEth, yearlyFeeEth, yearlyFeeSSV, balanceEth, balanceSSV } =
- useOperatorEarningsAndFees(operatorId);
+ const {
+ feeEth,
+ yearlyFeeEth,
+ yearlyFeeSSV,
+ balanceEth,
+ balanceSSV,
+ earningsStatus,
+ feesStatus,
+ } = useOperatorEarningsAndFees(operatorId);
- const hasBalance = balanceEth > 0n || balanceSSV > 0n;
+ const hasBalance =
+ earningsStatus.isSuccess && (balanceEth > 0n || balanceSSV > 0n);
+ const canUpdateFee = feesStatus.isSuccess && feeEth.data !== 0n;
if (!operator.data) return null;
@@ -111,7 +139,10 @@ export const Operator: FC> = ({ ...props }) => {
-
+
> = ({ ...props }) => {
>
Balance
-
-
- {yearlyFeeSSV !== 0n && !operator.data.migrated && (
+ {earningsStatus.isUnavailable ? (
+
+ ) : earningsStatus.isPending ? (
+
+ ) : (
+
- )}
-
+ {yearlyFeeSSV !== 0n && !operator.data.migrated && (
+
+ )}
+
+ )}
-
-
- {yearlyFeeSSV > 0 && (
+ {feesStatus.isUnavailable ? (
+
+ ) : feesStatus.isPending ? (
+
+ ) : (
+
- )}
-
+ {yearlyFeeSSV > 0 && (
+
+ )}
+
+ )}
Operators with a fee of 0 cannot change their fee.{" "}