- Introduces a local tracking variable in `Navbar` scroll effect to prevent redundant `setState` calls during scroll.
- Ensures the state is correctly initialized on mount if the page is already scrolled.
- Uses `requestAnimationFrame` for efficient scroll handling.
This reduces the number of React reconciliation cycles during scrolling, improving main thread performance.
Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
* 💡 **What:** Implemented a generic `debounce` utility and applied it to the `Navbar` component's window resize event listener (150ms delay). Added a `.cancel()` method to the debounce utility to prevent memory leaks/errors on unmount.
* 🎯 **Why:** The `resize` event fires rapidly, causing `getBoundingClientRect` (a layout-thrashing operation) to run excessively, impacting performance.
* 📊 **Measured Improvement:** In a benchmark test simulating 100 rapid resize events:
* **Baseline:** 200 calls to `getBoundingClientRect`.
* **Optimized:** 2 calls to `getBoundingClientRect`.
* **Result:** ~99% reduction in layout calculations during rapid resizing.
* Added `src/components/layout/Navbar.perf.test.tsx` to prevent regression.
Implemented `requestAnimationFrame` throttling for the scroll event listener in `Navbar` to reduce the frequency of state updates and logic execution.
- Wrapped scroll handler in `requestAnimationFrame`.
- Added performance test `src/components/layout/Navbar.test.tsx` verifying logic runs once per frame instead of per event.
- Verified functional correctness of scroll state updates.
- Fixed `useTypingEffect` test environment.
