[SPIKE] : How to do Optimistic Updates with NgRx Signal Store for Real-Time Style Changes

[KevinDavilaDotCMS]

Research Question

How can we implement optimistic updates in NgRx Signal Store to keep SDK components synchronized with the UVE state, while allowing rollback in case of API save failures?

Timebox

4h

Acceptance Criteria

• Investigate NgRx Signal Store’s latest features related to optimistic updates or rollback mechanisms.
• Propose a way to store and restore previous versions of the state in case an API call fails.
• Define a synchronization strategy between the UVE state and SDK components to ensure real-time updates.
• Document the proposed flow and potential technical limitations.

Context

Style updates in UVE should occur in real time, reflecting instantly on SDK components.
To achieve this, the SDK and UVE states must remain synchronized — meaning the state should be updated before the API save operation.

If the API call fails, we must have a reliable way to revert to the previous state.
Although the communication tunnel between UVE and SDK components already exists, the optimistic update mechanism still needs to be explored.

This spike aims to research how NgRx Signal Store can handle optimistic updates and rollback scenarios efficiently.

Links

No response

[KevinDavilaDotCMS]

I conducted the PoC in a new project, and here are the findings:

To implement optimistic updates, we need two key capabilities:

The ability to manually override the store state (without fetching from the backend).

A mechanism to revert to a previous state in case an error occurs.

Given that, this PoC focused on the second point — the mechanism to store and restore complete states, allowing us to move backward or forward between saved states (which also enables a potential UI history feature).
We don’t yet have the Style Editor API fully defined, and overriding the state requires a clear understanding of that API. The state override itself simply replaces values in the current store without needing a backend fetch.

As a result, I created a Signal Store Feature called withTimeMachine, which provides any store (in an agnostic way) with attributes and methods to:

• Save the current state,
  -Revert to the previous state,
  -Move forward to the next state,
  -Jump to any specific saved state, etc.

The intended workflow is as follows: when the user clicks Save (for a page or Style Editor element), we send the updated data to the backend and manually update the current store state with the new value.
We then call the feature’s saveToHistory() function to store this new version of the state.
If the backend returns an error, we simply call store.undo() to revert to the last saved state.

This approach gives us full control over the state lifecycle — when to save, when to revert, and how to manage a complete history of the user’s edits.

Additionally, this opens the door to a future enhancement: a side panel that displays the Style Editor’s change history, which we can later explore with the Product team.

For now, this withTimeMachine Signal Store Feature enables us to perform optimistic updates within the Style Editor.

The PoC project can be found in this repository: PoC Optimistic Updates

2025-11-11.21-08-57.mov