fix(cockpit-render): no [object Object] flash for unresolved value bindings mid-stream (#773)

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>

Author: blove

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>>({});

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>>({});