Let U(I) be optimistic


- Vilva Athiban P B

About me

JavaScript / GraphQL  earns my bread


Hobbies: Travel and painting


code@ProductRide (productride.com)


A Youtube series "Known Unknowns" - Vilva Athiban (Channel name)


About Product Ride



  • Quality products at affordable price


  • MVP Program


  • Workshops


  • Hire from the pool of skilled devs

Lets Begin

Optimistic UI

  • Optimistic UI is a front-end development paradigm wherein, the client updates the UI optimistically assuming the request is successful.

  • It switches to the final state while the real operation is still in progress

  • Predictive and not a Lie

  • It knows how the UI work and is efficient enough not to lose time


Optimistic UI - Advantages

  • Makes your app feel faster

  • Seamless operation on slow devices

  • Doesn't break user's FLOW

  • Streamlines the experience by removing unnecessary states and distractions

Optimistic UI - Key Metrics

  • 1 second can also be "forever" sometimes

  • Response to control activation - 100 to 200 ms

  • API success rate > 97%

  • Response time < 2 seconds to avoid breaking user's Flow

Different types of Optimistic UI with Real-world examples

  • Subtle UI - Twitter Likes

  • Subtle UI With Progress - Fb Messenger

  • With Progress and Actions - Tinder

  • Subtle UI with Error - Google Docs

Subtle UI - Twitter

Subtle UI with Progress

Facebook Messenger

Request in Progress

Request Successful

UI with Progress & Actions


Handling Errors

  • Salience - The notification should be visible, user should not miss it


  • Causality - The user should be able to understand which action caused this error. We already updated the UI, the action is “finished” in the mind of the user.

Optimistic UI



Normal Process




Mutation Request

Mutation Response

Refetch Query

Query Response

& UI updates

Using Update




Mutation Request

Mutation Response

update callback

UI update

Optimistic UI




Mutation Request

Mutation Response

UI update

On Error reverts UI update


Code & Demo

Thank you

QA Time: 


Please drop in some suggestions and feedback, so I can get better next time 


Made with Slides.com