fix: skip fade-in animation for history-restored messages#4120
Conversation
Session restore loads every message with `animation: graphite-message-in
340ms ease-out both`. The `both` fill-mode means ALL messages start at
opacity:0 and animate in simultaneously — on a session with dozens of
turns this causes visible text flickering / flashing on startup.
Live-streamed messages should keep the entrance animation; only static
history items need to skip it. History items are reliably identified by
their "h"-prefixed IDs (set by historyMessagesToItems in useController).
Fix: add a `data-history-restore` attribute on .msg elements whose id
starts with "h", and disable the animation via CSS:
.msg[data-history-restore] { animation: none; }
- Message.tsx: accept `id` prop on UserMessage; set data-history-restore
on both UserMessage and AssistantMessage when id starts with "h"
- Transcript.tsx: pass `id` to UserMessage (hot zone + warm zone)
- styles.css: add override rule after the .msg animation definition
|
Verified the fix where it matters: the modified Minor follow-up (not blocking): the warm-zone |
Session restore loads every message with
animation: graphite-message-in 340ms ease-out both. Thebothfill-mode means ALL messages start atopacity:0and animate in simultaneously — on a session with dozens of turns this causes visible text flickering / flashing on startup.Diagnosis: Historical messages are reloaded all at once during session restore. Each
.msgelement has a CSSgraphite-message-inkeyframe animation (opacity 0→1 + translateY 10px→0, 340ms). Withanimation-fill-mode: both, all elements start invisible, then simultaneously fade in — the user sees a flash.Live-streamed messages should keep the entrance animation; only static history items need to skip it. History items are reliably identified by their
"h"-prefixed IDs (set byhistoryMessagesToItemsin useController).Fix: Add a
data-history-restoreattribute on.msgelements whose id starts with"h", and disable the animation via CSS:idprop on UserMessage; setdata-history-restoreon both UserMessage and AssistantMessage when id starts with"h"idto UserMessage (hot zone + warm zone).msganimation definition