useLayoutEffect should execute immediately

[jacob314]

Ideally, Ink should only render a frame of the UI after useLayoutEffect is complete. Unfortunately this is not the case resulting in flicker where the frame without changes trigged by the useLayoutEffect render followed by changes with the useLayoutEffect.
For apps such as Gemini CLI that depends on useLayoutEffect to measure sizes before a frame renders this results in a frame of flicker before the content is visible when useLayoutEffect is used.

This would be simple to fix if it wasn't for Ink needing to support <Static>. We would just wait until all the pending useLayoutEffects are complete before rendering frames. This would break static rendering as we would miss rendering the frame with the static. To mitigate the issue with static we could either build up a buffer of all static content to add over the course of the multiple layouts that could occur in a single frame or we could modify <Static> to be more aware of Ink internals so that it only strips children of a static once the frame is actually done rendering

ink/src/components/Static.tsx

Line 37 in 927d748

setIndex(items.length);

rather than just when useLayoutEffect is called.
This might require adding a useInkRenderedFrame callback instead which might be more idiomatic.

The other solution I can see is to instead allow Static to slice off a piece of content to render each call to useLayoutEffect but ensure that the pieces of rendered static content get collected and merged together at the end of the frame.