mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-05 07:28:01 +00:00
google-labs-jules[bot]
cd8e014f08
Decouples the IntersectionObserver from the React component tree to
prevent
unnecessary re-renders of the entire Cuesheet table when row visibility
changes. Restores rootMargin for better UX and memoizes EventRow.
- Introduced `rowObserver.ts` to manage a global IntersectionObserver.
- Observer callback directly updates `useVisibleRowsStore`.
- Configured with `rootMargin: '400px 0px'` and `threshold: 0.01`
to pre-load and retain rows near the viewport, improving UX.
- `EventRow` components use `observeRow`/`unobserveRow` from
`rowObserver.ts`.
- `EventRow` is now wrapped in `React.memo` to prevent re-renders if
props
haven't changed when its parent re-renders.
- Removed observer creation and prop-drilling from `CuesheetBody.tsx`.
This ensures only individual rows re-render content based on visibility
and optimizes row component rendering, improving performance and UX.