Summit Ledger · FinTech
Signals Migration for a Financial Operations Dashboard
- Angular 20
- SignalStore
- Nx
- Azure Functions
Migrated a trading dashboard to Angular 20 with Signals and design tokens, eliminating jitter and giving executives proof of improved UX.
Challenge
The existing Angular 11 dashboard used zone-heavy NgRx setups with 1.2s median render times on modest laptops. Executives wanted v20 features without another rewrite.
Approach
- Introduced Signals for the most interactive portfolio components first, keeping NgRx around shared async workflows until Signals parity existed.
- Rebuilt theme tokens and density controls so traders could switch between “compact” and “analysis” modes instantly.
- Instrumented Core Web Vitals, custom facility metrics, and SSR hydration timings in Grafana.
Outcomes
- Render counts on the allocations panel dropped 68%.
- SSR first contentful paint improved from 2.9s to 1.7s on target hardware.
- Design QA cycle shrank from 4 days to under 2 thanks to Storybook contracts.
- 68%Fewer renders on critical widgets
- 1.2s → 0.6sMedian interaction latency
- 2x fasterDesign QA turnaround