fix: eliminate chart blink on lease detail and dashboard pages

- Watch specific lease fields (address, status) instead of whole object
  to avoid chart teardown+rebuild on every 10s poll
- Add STATUS_ORDER guard to WebSocket handler to prevent status regression
- Remove duplicate fetch in UnrealizedPnlChart that caused double render

Author: kostovster

src/common/stores/leases/index.ts

@@ -298,6 +298,13 @@ export const useLeasesStore = defineStore("leases", () => {
       WebSocketClient.subscribeLeases(addr, (wsLease) => {
         // Merge with existing data (WebSocket sends partial data, no ETL)
         const existing = leaseDetails.value.get(wsLease.address);
+
+        // Don't let a stale WebSocket event regress a lease whose status
+        // has already advanced (same guard as fetchLeaseDetails).
+        if (existing && (STATUS_ORDER[wsLease.status] ?? 0) < (STATUS_ORDER[existing.status] ?? 0)) {
+          return;
+        }
+
         const merged = existing ? { ...existing, ...wsLease } : (wsLease as LeaseInfo);
 
         // Update in main list, or add if not yet present

src/modules/dashboard/components/UnrealizedPnlChart.vue

@@ -51,28 +51,22 @@ const wallet = useWalletStore();
 const analyticsStore = useAnalyticsStore();
 const chart = ref<typeof Chart>();
 
-// Watch for position/debt data changes from analytics store
+// Watch for position/debt data changes from analytics store.
+// The store's useWalletWatcher already fetches dashboard data (including
+// positionDebtValue) on wallet connect — no need to fetch again here.
+// `immediate: true` picks up data that arrived before this component mounted.
+let lastResponseRef: unknown = null;
 watch(
   () => analyticsStore.positionDebtValue,
   (response) => {
-    if (response) {
+    if (response && response !== lastResponseRef) {
+      lastResponseRef = response;
       processPositionDebtData(response);
     }
   },
   { immediate: true }
 );
 
-// Watch for wallet changes to trigger fetch
-watch(
-  () => wallet.wallet?.address,
-  () => {
-    if (wallet.wallet?.address) {
-      loadData();
-    }
-  },
-  { immediate: true }
-);
-
 function updateChart(plotContainer: HTMLElement, tooltip: Selection<HTMLDivElement, unknown, HTMLElement, unknown>) {
   if (!plotContainer) return;
 
@@ -241,7 +235,10 @@ function processPositionDebtData(response: {
 }
 
 async function loadData() {
-  if (wallet.wallet?.address) {
+  // The analytics store's useWalletWatcher already fetches positionDebtValue
+  // as part of fetchDashboardData(). Only fetch here if the store hasn't
+  // loaded it yet (e.g. component mounted before the store finished).
+  if (wallet.wallet?.address && !analyticsStore.positionDebtValue) {
     await analyticsStore.fetchPositionDebtValue();
   }
 }

src/modules/leases/components/single-lease/PnlOverTimeChart.vue

@@ -93,7 +93,7 @@ async function setData() {
 }
 
 watch(
-  () => [props.lease, chartTimeRange.value],
+  () => [props.lease?.address, props.lease?.status, chartTimeRange.value],
   () => {
     setData();
   }

src/modules/leases/components/single-lease/PriceOverTimeChart.vue

@@ -77,7 +77,7 @@ const likert = {
 };
 
 watch(
-  () => [props.lease, props.interval],
+  () => [props.lease?.address, props.lease?.status, props.interval],
   () => {
     setData();
   }