How a Signals + Design Token Refresh Cut Renders 42% and Boosted Lighthouse from 78 → 96 (Angular 20+, PrimeNG)

Scene: jittery dashboards and CFO demos

at a leading telecom provider, the ads analytics team had dense PrimeNG tables and KPI cards. Theme toggles and density changes cascaded through the component tree, causing visible jitter during demos. We needed a performance fix without a redesign—just better state and token plumbing in Angular 20+.

• PrimeNG tables repaint on theme toggle

• Mobile Lighthouse stuck at 78

• CLS spikes when charts load

Constraints and goals

We kept the existing theme, spacing, and type ramp. The intervention had to be surgical, measurable, and reversible—exactly the kind of thing you hire an Angular expert for when you can’t burn two sprints on pixel-tweaks.

• No visual redesign

• Keep PrimeNG + Angular Material interop

• Zero-risk rollout with flags

What was going wrong

Tokens lived in pipes and global Subjects. Toggling theme/density triggered deep re-renders, especially in PrimeNG data tables and D3 charts. Even small DOM style changes in loops created unnecessary reflows.

• Token pipes in templates recomputed on every CD pass

• Global BehaviorSubjects for theme/density fanned out broadcasts

• Inline style bindings caused reflows in hot paths

Why Signals fix it

Angular Signals give us precise invalidation. A TokenStore exposes system tokens and semantic tokens as signals. We apply them via a single effect to documentElement.style, so components observe CSS var changes without triggering Angular renders.

• Fine-grained reactivity avoids global broadcasts

• Computed signals memoize derived token sets

• Single DOM sink updates CSS vars without re-rendering components

Diagnostics workflow

We profiled theme/density toggles and table pagination. Angular DevTools showed wide re-render fans on a BehaviorSubject.next for theme. Flame charts flagged token pipes as hotspots. We locked a Lighthouse CI budget in PR to prevent regressions.

• Angular DevTools profiler

• Flame charts for theme toggle

• Lighthouse CI thresholds in PR

Hot paths

PrimeNG p-table row templates were re-evaluating on every token change, even for static cells. KPI cards relied on pipes for colors/spacing. Chart containers received inline style bindings, forcing layout on frequent updates.

• p-table row templates

• KPI card components

• Chart containers during resize

Token model: system → semantic → component

We aligned with design on a three-layer token map. Only semantic and component tokens change at runtime; system tokens are mostly static.

• System tokens: color, type, spacing

• Semantic tokens: surface, text, emphasis

• Component tokens: table, card, chart

SignalStore for tokens

The TokenStore holds immutable system tokens and computed semantic tokens. A single effect writes CSS variables to the root element.

• @ngrx/signals SignalStore

• Computed semantic tokens

• Single write: apply to DOM

Bridge to CSS variables

We snapshot initial tokens on app bootstrap to prevent FOUC and then stream changes via an effect. Components read CSS vars via classes, not bindings.

• documentElement.style.setProperty

• Avoid inline bindings in loops

• SSR-safe initial snapshot

TokenStore (Angular 20 + @ngrx/signals)

// token-store.ts
import { signal, computed, effect, inject } from '@angular/core';
import { SignalStore, withState } from '@ngrx/signals';

export type Mode = 'light' | 'dark';
interface SystemTokens {
  brandPrimary: string;
  brandSecondary: string;
  spacing: { sm: string; md: string; lg: string };
  type: { fontFamily: string; size: { sm: string; md: string; lg: string } };
}
interface TokenState {
  mode: Mode;
  density: 'comfortable' | 'compact';
  system: SystemTokens;
}

export class TokenStore extends SignalStore(withState<TokenState>({
  mode: 'light',
  density: 'comfortable',
  system: {
    brandPrimary: '#2563eb',
    brandSecondary: '#7c3aed',
    spacing: { sm: '4px', md: '8px', lg: '16px' },
    type: { fontFamily: 'Inter, system-ui, sans-serif', size: { sm: '12px', md: '14px', lg: '16px' } },
  },
})) {
  readonly mode = this.selectSignal(s => s.mode);
  readonly density = this.selectSignal(s => s.density);
  readonly system = this.selectSignal(s => s.system);

  readonly semantic = computed(() => {
    const m = this.mode();
    const sys = this.system();
    return {
      surface: m === 'light' ? '#ffffff' : '#0b1220',
      surfaceAlt: m === 'light' ? '#f7f9fc' : '#0f172a',
      textPrimary: m === 'light' ? '#0f172a' : '#e2e8f0',
      textSecondary: m === 'light' ? '#334155' : '#94a3b8',
      link: sys.brandPrimary,
    };
  });

  setMode(mode: Mode) { this.setState(s => ({ ...s, mode })); }
  setDensity(density: 'comfortable' | 'compact') { this.setState(s => ({ ...s, density })); }
}

Apply tokens once to the DOM

// token-bridge.ts
import { inject, effect } from '@angular/core';
import { TokenStore } from './token-store';

export function provideTokenBridge() {
  const tokens = inject(TokenStore);
  effect(() => {
    const s = tokens.system();
    const sem = tokens.semantic();
    const root = document.documentElement.style;
    root.setProperty('--brand-primary', s.brandPrimary);
    root.setProperty('--surface', sem.surface);
    root.setProperty('--surface-alt', sem.surfaceAlt);
    root.setProperty('--text-primary', sem.textPrimary);
    root.setProperty('--text-secondary', sem.textSecondary);
    root.setProperty('--space-sm', s.spacing.sm);
    root.setProperty('--space-md', s.spacing.md);
    root.setProperty('--space-lg', s.spacing.lg);
  });
}

Use tokens in SCSS and templates without re-renders

/* tokens.scss */
:root {
  --brand-primary: #2563eb;
  --surface: #ffffff;
  --surface-alt: #f7f9fc;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 16px;
}
.card {
  background: var(--surface);
  color: var(--text-primary);
  padding: var(--space-md);
}

<!-- No token pipes; classes read CSS vars -->
<p-card styleClass="card">
  <ng-template pTemplate="header">Revenue</ng-template>
  {{ revenue | number:'1.0-0' }}
</p-card>

PrimeNG density and row height

We mapped density to row height via CSS variables consumed by PrimeNG overrides. No ComponentFixture churn on density changes.

• Density stored in TokenStore

• CSS vars control row padding

Angular Material tokens

Material 3 design tokens stayed aligned with our semantic tokens; we avoided per-component bindings by keeping changes at the root.

• M3 tokens aligned to our semantic map

• Kept Mat components in sync via CSS vars

Angular DevTools: render counts

We recorded render counts for p-table row templates and KPI cards. After the refresh, row templates rendered 41–45% less often per interaction.

• Compare before/after on hot routes

• Focus on table pagination and theme toggles

Lighthouse CI gates in PR

We added LHCI to Nx CI so every PR had to meet budgets.

• Budget mobile Performance > 90

• Block regressions on CLS/TTI

Firebase Performance + GA4

We used GA4/Firebase to annotate when the token bridge was enabled, then compared field data for TBT and layout stability.

• Real user monitoring on TBT/CLS proxies

• Feature flag event annotations

Before: token pipes drive churn

<!-- before: every token pipe triggered CD in row templates -->
<td *ngFor="let col of cols">
  <span [style.color]="(tokenSvc.textPrimary$ | async) | tokenPipe">
    {{ row[col.field] }}
  </span>
</td>

After: stable templates + CSS vars

<!-- after: no token pipe; CSS vars carry color -->
<td *ngFor="let col of cols; trackBy: trackByField">
  <span class="cell">{{ row[col.field] }}</span>
</td>

.cell { color: var(--text-primary); }

Result

This pattern held for KPI cards and chart containers as well.

• Row template renders: −42%

• Pagination time: −28%

• No visible jitter on theme toggle

Signals + tokens are high-leverage

If your team is under a Q1 budget freeze but needs visible UX wins, this is a perfect engagement. I’ve run it at media, telecom, and aviation scale. It’s also a smart first step before larger refactors or SSR adoption.

• 2–4 week engagement for most dashboards

• Low risk, measurable impact

• Great precursor to bigger upgrades

What I deliver

You get working code, PRs, telemetry, and a playbook your team can run. If you need deeper rescue work, see how we stabilize vibe-coded apps with gitPlumbers.

• TokenStore + CSS bridge in Angular 20+

• PrimeNG/Material adapters

• LHCI + Firebase instrumentation

• Playbook and handoff docs

Outcomes from this refresh

We kept the design intact and shipped performance gains your CFO can see in a demo.

• Lighthouse mobile: 78 → 96

• Row template renders: −42%

• Pagination latency: −28%

• CLS: 0.09 → 0.03

• No redesign; zero visual regressions

Next steps

For real-time analytics (a broadcast media network/an insurance technology company telematics patterns), add virtualization and typed event schemas. For kiosks (United), ensure offline-safe token snapshots and device-state aware themes for accessibility.

• SSR hydration with stable initial tokens

• WebSocket-fed dashboards with virtualization

• Telemetry dashboards (OpenTelemetry, GA4)

Typical timeline

Smaller dashboards can complete in two weeks; large multi-tenant portals run closer to four with visual regression tests.

• Assessment: 1 week

• Pilot rollout: week 2

• Full rollout: week 3–4

Tooling expectations

I fit into your stack fast and leave instrumentation that prevents backsliding.

• Angular 20+, Nx, PrimeNG/Material

• LHCI, Firebase Performance, GA4

• Feature flags for rollout