Three-Layer Anti-Flicker Architecture
How SalesSheet eliminates every UI flicker
1
Optimistic Update
Instantly apply the change to local state before the server responds. The UI updates immediately with the user's intended value.
cache.set(key, newValue) → render immediately
0ms
instant
if server responds...
2
Background Refetch
Silently fetch the authoritative data from the server. Diff against current state and merge only changed fields to avoid visual disruption.
diff(optimistic, server) → merge non-conflicting fields
~200ms
background
if refetch fails...
3
Stale Fallback
Keep showing the last-known-good data with a subtle stale indicator. Never show loading skeletons or empty states for data that was just visible.
if (refetchFailed) show(staleData, { indicator: true })
∞
fallback
Result: Zero visual disruption for every user action
0 flickers