Conversation
replaces the synchronous `getboundingclientrect` call in `isinview()` with a cached visibility boolean updated via an asynchronous `intersectionobserver`. this prevents layout thrashing on high-frequency events like keydown or mousewheel when the carousel is present.
|
👋 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. |
Deploying personal-website with
|
| Latest commit: |
535010e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://6923657a.personal-website-5ns.pages.dev |
| Branch Preview URL: | https://bolt-photo-carousel-intersec.personal-website-5ns.pages.dev |
There was a problem hiding this comment.
Pull request overview
This PR improves frontend performance by removing synchronous layout reads from PhotoCarousel.isInView() and replacing them with an IntersectionObserver-driven cached visibility boolean.
Changes:
- Add
PhotoCarousel.isVisibleand anIntersectionObserverto track carousel viewport visibility. - Update
PhotoCarousel.isInView()to return the cached visibility state instead of callinggetBoundingClientRect(). - Document the optimization approach in
.jules/bolt.md.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| script.js | Replaces getBoundingClientRect()-based visibility checks with an IntersectionObserver-cached boolean for the photo carousel. |
| .jules/bolt.md | Adds a performance note recommending IntersectionObserver for visibility checks in high-frequency handlers. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| entries.forEach(entry => { | ||
| this.isVisible = entry.isIntersecting; | ||
| }); | ||
| }, { threshold: 0.1 }); |
There was a problem hiding this comment.
The previous isInView() logic treated the carousel as “in view” when any part intersected the viewport (rect.top < innerHeight && rect.bottom > 0). Using IntersectionObserver with threshold: 0.1 changes that behavior (requires ~10% visibility), which can alter keyboard/wheel navigation activation near the viewport edges. To preserve existing behavior, use a threshold that matches the old condition (typically 0, optionally with an appropriate rootMargin).
| }, { threshold: 0.1 }); | |
| }, { threshold: 0 }); |
| isInView() { | ||
| if (!this.carousel) return false; | ||
| const rect = this.carousel.getBoundingClientRect(); | ||
| return rect.top < window.innerHeight && rect.bottom > 0; | ||
| // ⚡ bolt: return cached state instead of synchronous layout query | ||
| return this.isVisible; |
There was a problem hiding this comment.
isVisible starts as false and is only updated asynchronously by the observer callback; immediately after init() (before the first observer delivery), isInView() will return false even if the carousel is already on screen, so early keydown navigation can be ignored. Consider initializing isVisible once during init() (a one-time viewport check) so behavior is correct from the first interaction while still avoiding high-frequency layout reads.
💡 what: replaces synchronous
getboundingclientrectcalls inphotocarousel.isinview()with a cachedisvisibleboolean powered by anintersectionobserver.🎯 why:
isinview()is called inside high-frequency event handlers like keydown. queryinggetboundingclientrectsynchronously forces the browser to recalculate the layout (layout thrashing), which degrades rendering performance.📊 impact: eliminates forced synchronous layouts on keypresses and trackpad scrolls within the carousel context, leading to smoother scrolling and lower cpu usage.
🔬 measurement: run the app, scroll to the carousel, and record a performance profile while pressing arrow keys. note the absence of "forced reflow" or "layout" recalculation tasks that were previously triggered by
getboundingclientrect.PR created automatically by Jules for task 1752089336692365493 started by @dttdrv