Problem Statement

The application suffered from:

• Slow page loads caused by inefficient store structures.

• Heavy reliance on large HTML tables.

• Excessive DOM nodes per page.

• Repeated data fetching during navigation, even when data had already been loaded.

These issues severely limited how quickly payroll specialists could work through client requests. This also impacted clients with slower networks, which was in the case, most clients.

Proposed solution

Reduce the amount of elements rendered to the DOM to ensure we improve render times on the frontend. Implement some sort of caching mechanism and reusability if data to reduce the amount of API calls made over slower networks.

My role

I was responsible for rearchitecting key parts of the frontend, rebuilding core components, and improving data flow to drastically reduce load times and interaction delays across the payroll system.

Process & execution

Key improvements included:

• Redesigning state management and store structures to reduce unnecessary recomputation.

• Replacing slow, complex HTML tables with optimised div + flex-based layouts.

• Reducing the total DOM element count per page.

• Introducing a layered caching strategy, allowing data to persist across navigation instead of reloading on every interaction

• Added virtual scrolling to reduce initial number of DOM elements rendered.

Navigation behaviour was fundamentally improved:

Before

1. Navigate to payroll page → data loads

2. Open a pay run → data loads

3. Open an employee pay run → data loads

4. Navigate back → data loads again

5. Navigate back to payroll → data loads again

After

1. Navigate to payroll page → data loads → cached

2. Open a pay run → data loads → cached

3. Open an employee pay run → cached data used, missing data fetched and cached

4. Navigate back → cached data used

5. Navigate back to payroll → cached data used

Results
Performance gains were dramatic:

• Time & Attendance view: 25s → 2s

• Employees page: 12s → 1.5s

Beyond raw speed, the real impact was operational:

• Payroll specialists increased capacity from 4 clients per day to 16 clients per day

• Average support time dropped from 2 hours per client to 30 minutes

Key features

• Shared Angular stores that allowed us to reuse data in different parts of the system.

• Local Angular stores with computed properties to ensure global shared data stays pure.

• Dynamic reusable components that allowed us to move faster with better structured code.

• Reusable getter / setter functions to ensure data accuracy and implementation.

Outcome

The re-architecture transformed the payroll app from a bottleneck into a high-performance tool, directly improving productivity, user satisfaction, and business output, without changing the core business logic.