⚡ Bolt: Optimize scroll performance and TOC rendering#1
Conversation
- Implemented direct DOM updates for the progress bar using a Ref to bypass React's re-render cycle during scrolls. - Throttled the scroll listener using requestAnimationFrame for better performance. - Cached headings in a Ref to eliminate repeated querySelectorAll calls during scrolls. - Extracted and memoized TOCItem component, with useCallback for its click handler, to minimize TOC re-renders. - Wrapped heavy synchronous markdown processing in setTimeout to improve perceived performance by allowing the loading spinner to paint. - Fixed existing lint errors and restored window title persistence on file changes. Co-authored-by: VagueDustin <127912586+VagueDustin@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
1 participant
💡 What:
Optimized the scroll handling and Table of Contents (TOC) rendering logic in the main
Appcomponent.🎯 Why:
The previous implementation updated React state on every scroll tick and performed expensive DOM queries (
querySelectorAll) and layout calculations (getBoundingClientRect) on each event. This led to frequent full-app re-renders and potential frame drops, especially in large documents.📊 Impact:
Appcomponent during scrolling (unless the active heading changes).🔬 Measurement:
npm run lintandnpm run build.PR created automatically by Jules for task 14106035736568216985 started by @VagueDustin