From 83ceaeda9d79d239df08d8995b7f3bfd0cea0858 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sun, 12 Apr 2026 20:55:30 +0300
Subject: [PATCH] fix: HA Light Target cards flickering on every poll cycle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use stable placeholder values in card HTML for volatile metrics (fps,
uptime, HA status, entity swatches) so CardSection.reconcile() skips
unchanged cards. Actual values are patched in-place via
patchHALightTargetMetrics() — same pattern LED target cards already use.
---
 .../static/js/features/ha-light-targets.ts          | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/server/src/wled_controller/static/js/features/ha-light-targets.ts b/server/src/wled_controller/static/js/features/ha-light-targets.ts
index 41a8a66..35ed473 100644
--- a/server/src/wled_controller/static/js/features/ha-light-targets.ts
+++ b/server/src/wled_controller/static/js/features/ha-light-targets.ts
@@ -546,20 +546,18 @@ export function createHALightTargetCard(target: any, haSourceMap: Record<string,
                 <div class="metrics-grid target-metrics-expanded">
                     <div class="metric">
                         <div class="metric-label">${t('targets.fps')}</div>
-                        <div class="metric-value" data-tm="fps">${(state.fps_actual ?? target.update_rate ?? 2).toFixed(1)} Hz</div>
+                        <div class="metric-value" data-tm="fps">---</div>
                     </div>
                     <div class="metric">
                         <div class="metric-label">${t('device.metrics.uptime')}</div>
-                        <div class="metric-value" data-tm="uptime">${metrics.uptime_seconds ? formatUptime(metrics.uptime_seconds) : '---'}</div>
+                        <div class="metric-value" data-tm="uptime">---</div>
                     </div>
                     <div class="metric">
                         <div class="metric-label">HA</div>
-                        <div class="metric-value" data-tm="ha-status">${state.ha_connected ? ICON_OK : ICON_WARNING}</div>
+                        <div class="metric-value" data-tm="ha-status">---</div>
                     </div>
                 </div>
-                <div class="ha-light-swatches" data-ha-swatches="${target.id}">
-                    ${_renderEntitySwatches(state.entity_colors || {}, target.ha_light_mappings || [])}
-                </div>
+                <div class="ha-light-swatches" data-ha-swatches="${target.id}"></div>
                 ` : ''}
             </div>`,
         actions: `
@@ -587,6 +585,9 @@ export function patchHALightTargetMetrics(target: any): void {
 
     const haEl = card.querySelector('[data-tm="ha-status"]') as HTMLElement | null;
     if (haEl) haEl.innerHTML = state.ha_connected ? ICON_OK : ICON_WARNING;
+
+    const swatchesEl = card.querySelector(`[data-ha-swatches="${target.id}"]`) as HTMLElement | null;
+    if (swatchesEl) swatchesEl.innerHTML = _renderEntitySwatches(state.entity_colors || {}, target.ha_light_mappings || []);
 }
 
 // ── Event delegation ──