Optimize provider update pill renders#3770
Conversation
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
| onOpenProviderSettings: () => void; | ||
| } | ||
|
|
||
| function useProviderUpdateSidebarVisibleAfterIso(): string { |
There was a problem hiding this comment.
🟡 Medium sidebar/SidebarProviderUpdatePill.tsx:42
useProviderUpdateSidebarVisibleAfterIso captures new Date().toISOString() at mount, so any provider update that finished before the remount is permanently filtered out — the pill disappears on remount even though the update is still relevant. When the sidebar unmounts and remounts (e.g. on layout/mobile state changes), visibleAfterIso jumps forward to the new mount time, and getProviderUpdateSidebarPillView drops any update whose finishedAt predates it. The previous approach derived the threshold from provider data (latestProviderCheckedAt), so the notice survived remounts until provider state actually changed. Consider deriving visibleAfterIso from provider state rather than component mount time, or document why remounts should hide previously-eligible updates.
🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx around line 42:
`useProviderUpdateSidebarVisibleAfterIso` captures `new Date().toISOString()` at mount, so any provider update that finished before the remount is permanently filtered out — the pill disappears on remount even though the update is still relevant. When the sidebar unmounts and remounts (e.g. on layout/mobile state changes), `visibleAfterIso` jumps forward to the new mount time, and `getProviderUpdateSidebarPillView` drops any update whose `finishedAt` predates it. The previous approach derived the threshold from provider data (`latestProviderCheckedAt`), so the notice survived remounts until provider state actually changed. Consider deriving `visibleAfterIso` from provider state rather than component mount time, or document why remounts should hide previously-eligible updates.
What Changed
SidebarProviderUpdatePillContentand moved the necessary transition effects into named hooks.Why
react-doctorflaggedSidebarProviderUpdatePillfor state updates in effects and handler-only state. The old mount path performed an extra commit for every fresh pill mount. The new implementation avoids the unnecessary initial effect commit while keeping transition/dismiss behavior isolated in a named hook.UI Changes
No visual UI change intended.
React Scan recordings captured with the temporary harness:
react_scan_provider_update_pill_before.mp4— 5 remounts reached 10 pill commits.react_scan_provider_update_pill_after.mp4— the same 5 remounts reached 5 pill commits.Checklist
Validation:
vp checkpassed (0 errors, existing warnings remain)vp run typecheckpassedreact-doctor --category performancererun; broader repo findings remain, but the provider pill timestamp/state-only finding is removed. The remaining provider-pill transition update is in a named hook and is required for exit animations.Note
Refactor
SidebarProviderUpdatePillto set visibility threshold at mount timeSidebarProviderUpdatePillinto a thin wrapper and a newSidebarProviderUpdatePillContentcomponent, extracting transition/dismiss logic intouseSidebarProviderUpdatePillTransition.latestProviderCheckedAtutil with a newuseProviderUpdateSidebarVisibleAfterIsohook that setsvisibleAfterIsoto the component mount time instead of deriving it from providercheckedAtvalues.📊 Macroscope summarized 259ff41. 1 file reviewed, 0 issues evaluated, 0 issues filtered, 0 comments posted
🗂️ Filtered Issues
No issues evaluated.