From f08fb434dc0e45cbafcc1fda2dc9ba81283ca859 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Tue, 7 Jul 2026 11:26:47 -0700
Subject: [PATCH] fix(cockpit-render): no [object Object] flash for unresolved
 value bindings mid-stream

demo-value / demo-label rendered their value input directly ({{ value() }}).
During streaming, a partial $computed binding resolves to an object, so the
row briefly showed 'LABEL: [object Object]' between the skeleton and the final
value. Route the value through toDisplayText() via a displayValue computed and
guard the row on it, so an unresolved object renders nothing (not [object Object])
until it resolves.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../angular/src/app/computed-functions.component.ts        | 7 +++++--
 .../angular/src/app/state-management.component.ts          | 5 +++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts b/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts
index df2dc6254..aae78ae58 100644
--- a/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts
+++ b/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts
@@ -35,10 +35,10 @@ import { toDisplayText } from '../../../../shared/to-display-text';
     }
   `,
   template: `
-    @if (label() || value()) {
+    @if (displayValue()) {
       <div class="row">
         <span class="row__label">{{ label() }}:</span>
-        <span class="row__value">{{ value() }}</span>
+        <span class="row__value">{{ displayValue() }}</span>
       </div>
     } @else if (loading()) {
       <div class="sr-skeleton" style="height: 11px; width: 100%; margin: 3px 0;"></div>
@@ -49,6 +49,9 @@ import { toDisplayText } from '../../../../shared/to-display-text';
 class DemoValueComponent {
   readonly label = input('');
   readonly value = input<unknown>('');
+  // Coerce through toDisplayText so an unresolved binding object mid-stream
+  // (e.g. a partial `$computed` value) renders as the skeleton, not `[object Object]`.
+  readonly displayValue = computed(() => toDisplayText(this.value()));
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});
diff --git a/cockpit/render/state-management/angular/src/app/state-management.component.ts b/cockpit/render/state-management/angular/src/app/state-management.component.ts
index 333d513b0..5f3cde4b5 100644
--- a/cockpit/render/state-management/angular/src/app/state-management.component.ts
+++ b/cockpit/render/state-management/angular/src/app/state-management.component.ts
@@ -83,10 +83,10 @@ class DemoHeadingComponent {
     }
   `,
   template: `
-    @if (label() || value()) {
+    @if (displayValue()) {
       <div class="row">
         <span class="row__label">{{ label() }}:</span>
-        <span class="row__value">{{ value() }}</span>
+        <span class="row__value">{{ displayValue() }}</span>
       </div>
     } @else if (loading()) {
       <div class="sr-skeleton" style="height: 11px; width: 100%; margin: 3px 0;"></div>
@@ -97,6 +97,7 @@ class DemoHeadingComponent {
 class DemoLabelComponent {
   readonly label = input('');
   readonly value = input('');
+  readonly displayValue = computed(() => toDisplayText(this.value()));
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});