2070298 - Gate newtab_message first paint until content.states resolve

Status: NEW

(Firefox :: Messaging System, enhancement, P1)

Description

[Andy Huang]

asrouter-newtab-message renders its base content immediately on mount and evaluates content.states asynchronously afterwards, so any state that hides or replaces an element paints the pre-state version first and corrects it a frame or more later. This shows up as a flicker on every newtab load and refresh, where a CTA that a state removes is briefly visible.

connectedCallback starts the poll but doesn't resolve a state; updated() only triggers the first evaluation once isIntersecting flips, which happens after the IntersectionObserver fires and therefore after paint; and #evaluateStates dispatches a CustomEvent that round-trips through ASRouterNewTabMessageChild to ASRouterNewTabMessageParent for JEXL evaluation before calling back into setMatchedState.

I think we should withhold first paint for messages that declare states, rendering nothing or a fixed-size placeholder until the first setMatchedState resolves. Messages without states are unaffected and keep painting immediately. We'd want a bounded timeout so a slow or failed evaluation falls back to base content rather than never rendering, and we should decide whether the placeholder reserves the card's height to avoid a reflow in the newtab layout.