[TASK] Implement Optimistic Updates in Style Editor for Real-Time Headless Rendering

[KevinDavilaDotCMS]

Description

We have a form that lists contentlet configurations with various controls. (Check [TASK] Render Style Editor Form Based on Configuration from @dotcms/uve)

The Goal We need to connect the editing of these styles with the rendered headless page to ensure a seamless user experience. The goal is to implement Optimistic Updates so that when a user makes a change, they see the update in real-time without waiting for network latency.

Technical Requirements

• Optimistic Mechanism: Create a mechanism to apply changes immediately to the UI.

• Efficient Updates: Develop an efficient function to replace the new values within the page structure.

• Backend Synchronization: Ensure the new value is saved to the backend asynchronously after the local update.

• Rollback Strategy: If the backend save fails, the system must revert to the previous state.

Acceptance Criteria

• Real-time Updates: When a user modifies a control in the Style Editor, the change is sent immediately to the headless page via an optimistic update (zero wait time).

• Backend Persistence: Trigger a SAVE operation to the backend immediately after the local update.

• Error Handling (Rollback):

• If the SAVE operation fails, the page object must revert to its previous state.

• The reverted object must be sent back to the headless page to reflect the valid state.

• The user must be notified of the error.

• Success State: If the SAVE does not fail, the workflow continues normally without interrupting the user.

• The function responsible for replacing values in the page structure must be optimized for performance to prevent UI lag.

Priority

None

Additional Context

Please review #33691

[github-actions]

PRs linked to this issue

• 34085 task implement optimistic updates in style editor for real time headless rendering by @KevinDavilaDotCMS