Problem
The initial render of a Reports list mounts a full PressableWithFeedback tree (including Tooltip, Hoverable, and BoundsObserver) inside every EditableCell. Doing this synchronously during the skeleton render is expensive and keeps the JS thread busy, delaying the moment the network response for the screen can be processed. Cold/first navigations to Reports are noticeably slower as a result (~3500 ms average).
Solution
Defer the interactive subtree of EditableCell using useDeferredValue(true, false). While the deferred flag is still false, the cell renders a layout-identical plain View (the same fallback used when canEdit is false), so layout/skeleton work stays cheap. Once React has idle time, the deferred value flips to true and the full pressable/tooltip tree mounts. This shaves ~330 ms (~9%) off the cold navigation to Reports while leaving repeat navigations effectively unchanged.
PR
#91034
Issue Owner
Current Issue Owner: @mallenexpensify
Problem
The initial render of a Reports list mounts a full
PressableWithFeedbacktree (includingTooltip,Hoverable, andBoundsObserver) inside everyEditableCell. Doing this synchronously during the skeleton render is expensive and keeps the JS thread busy, delaying the moment the network response for the screen can be processed. Cold/first navigations to Reports are noticeably slower as a result (~3500 ms average).Solution
Defer the interactive subtree of
EditableCellusinguseDeferredValue(true, false). While the deferred flag is stillfalse, the cell renders a layout-identical plainView(the same fallback used whencanEditis false), so layout/skeleton work stays cheap. Once React has idle time, the deferred value flips totrueand the full pressable/tooltip tree mounts. This shaves ~330 ms (~9%) off the cold navigation to Reports while leaving repeat navigations effectively unchanged.PR
#91034
Issue Owner
Current Issue Owner: @mallenexpensify