perf: Optimize Header scroll performance with IntersectionObserver

[kennethkalmer]

Jira Ticket Link / Motivation

WEB-4845 - Performance optimization to eliminate iOS device overheating

Our website (ably.com) is experiencing severe CPU issues on iOS devices causing overheating complaints. Chrome DevTools Performance profiling identified two critical bottlenecks:

1. Header component: 71-193ms of forced reflows per scroll event
2. Expander component: 67-92ms of forced reflows (discovered after fixing Header)

Both components were using synchronous layout queries (getBoundingClientRect(), clientHeight) that force the browser to recalculate layout on every interaction.

Summary of Changes

This PR implements performance optimizations for both components using modern browser APIs:

Header Optimization (useThemedScrollpoints)

New Files:

• src/core/hooks/use-themed-scrollpoints.ts - Custom hook using IntersectionObserver
• src/core/hooks/use-themed-scrollpoints.test.ts - Comprehensive unit tests (14 tests)
• src/core/Header/types.ts - Extracted ThemedScrollpoint type

Modified Files:

• src/core/Header.tsx - Replaced getBoundingClientRect() with useThemedScrollpoints hook
• vite.config.mts - Added new hook test to suite
• package.json / pnpm-lock.yaml - Added @testing-library/react dev dependency

Performance Impact:

• Before: 71-193ms of forced reflows per scroll
• After: <2ms overhead
• 98% improvement

Expander Optimization (useContentHeight)

New Files:

• src/core/hooks/use-content-height.ts - Custom hook using ResizeObserver

Modified Files:

• src/core/Expander.tsx - Replaced clientHeight with useContentHeight hook
• Removed throttled resize listener
• Added useMemo for performance

Performance Impact:

• Before: 67-92ms of forced reflows
• After: <5ms overhead
• 94% improvement

Pages Affected:

• /chat - Was 67ms reflows (52% of total) → Now <5ms
• /pubsub - Was 92ms reflows (96% of total) → Now <5ms

Bug Fix: Themed Scrollpoints

Fixed critical bugs in useThemedScrollpoints:

1. Initial state bug: IntersectionObserver callbacks only fire on changes, not mount

   • Added setTimeout(0) initial check to detect state on mount

2. Partial updates bug: Observer only reports changed elements, not all intersecting

   • Added Map to track all currently intersecting elements
   • Re-evaluate ALL intersecting elements on each callback
   • Use "closest to header position" logic for accurate detection

How to Manually Test

1. Performance Testing (Chrome DevTools)

pnpm storybook

Header Test:

1. Open DevTools → Performance tab
2. Navigate to "Header > With Themed Scrollpoints"
3. Record while scrolling
4. Verify zero getBoundingClientRect calls in scroll handler
5. Verify <2ms overhead

Expander Test:

1. Navigate to "Expander > Default"
2. Record while expanding/collapsing
3. Verify zero clientHeight reads
4. Verify <5ms overhead

2. Functional Testing

Themed Scrollpoints:

• Load "Header > With Themed Scrollpoints"
• Header should be transparent on load (showing orange gradient)
• Scroll down → header becomes white background
• Scroll to dark zone → header becomes dark
• Scroll back to top → header becomes transparent again

Expander:

• All expand/collapse animations should work smoothly
• Dynamic content changes should be handled
• Nested expanders should work (if applicable)

3. Run Tests

pnpm test

All 203 tests should pass.

Key Optimizations

1. IntersectionObserver API - Async intersection detection (Header)
2. ResizeObserver API - Async height tracking (Expander)
3. requestAnimationFrame batching - Batch state updates
4. Cached DOM references - Query once on mount
5. Passive scroll listeners - iOS performance boost
6. Change detection - Only update state when values change
7. useMemo optimization - Prevent unnecessary recalculations

Testing

• ✅ All 203 tests passing
• ✅ 14 new unit tests for useThemedScrollpoints
• ✅ Backward compatible - no API changes
• ✅ TypeScript compilation successful
• ✅ Linting passes

Merge/Deploy Checklist

• Written automated tests
• Commits have clear descriptions
• Checked for performance regressions (massive improvements, no regressions)
• Remove temporary markdown docs before merging
• Squash fixup commit with git rebase --autosquash -i

Notes

• Version bumped to 17.13.0 for pre-release testing in Voltaire
• Two temporary commits with markdown docs will be removed before final merge
• One fixup commit will be squashed during rebase
• No breaking changes - fully backward compatible

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}