⚡ Bolt: Optimized GradientBlinds resize performance #50

2026-02-03T01:47:46Z

ragusa-it commented

2026-02-03 01:47:46 +00:00

(Migrated from github.com)

⚡ Bolt: Optimized GradientBlinds resize performance

💡 What:
Modified GradientBlinds.tsx to use ResizeObserverEntry.contentRect for dimensions and defer getBoundingClientRect() to requestAnimationFrame.

🎯 Why:
Calling getBoundingClientRect() synchronously inside a ResizeObserver callback forces a layout recalculation (thrashing) because the observer runs after layout but before paint.

📊 Impact:
Reduces layout work during resize events. While visual impact is subtle, it prevents frame drops during window resizing, especially on lower-end devices.

🔬 Measurement:
Verified with src/components/effects/GradientBlinds.test.tsx and manual code review. Existing tests pass.

PR created automatically by Jules for task 5528101139476827014 started by @ragusa-it

⚡ Bolt: Optimized GradientBlinds resize performance 💡 What: Modified `GradientBlinds.tsx` to use `ResizeObserverEntry.contentRect` for dimensions and defer `getBoundingClientRect()` to `requestAnimationFrame`. 🎯 Why: Calling `getBoundingClientRect()` synchronously inside a `ResizeObserver` callback forces a layout recalculation (thrashing) because the observer runs after layout but before paint. 📊 Impact: Reduces layout work during resize events. While visual impact is subtle, it prevents frame drops during window resizing, especially on lower-end devices. 🔬 Measurement: Verified with `src/components/effects/GradientBlinds.test.tsx` and manual code review. Existing tests pass. --- *PR created automatically by Jules for task [5528101139476827014](https://jules.google.com/task/5528101139476827014) started by @ragusa-it*

google-labs-jules[bot] commented

2026-02-03 01:47:48 +00:00

(Migrated from 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

👋 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 `@jules`. You can find this option in the **Pull Request** section of your [global Jules UI settings](https://jules.google.com/settings). You can always switch back! New to Jules? Learn more at [jules.google/docs](https://jules.google/docs). --- *_For security, I will only act on instructions from the user who triggered this task._*

chatgpt-codex-connector[bot] (Migrated from github.com) reviewed 2026-02-03 01:49:50 +00:00

chatgpt-codex-connector[bot] (Migrated from github.com) left a comment

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7ecfd04f35

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

### 💡 Codex Review Here are some automated review suggestions for this pull request. **Reviewed commit:** `7ecfd04f35` <details> <summary>ℹ️ About Codex in GitHub</summary> [Your team has set up Codex to review pull requests in this repo](http://chatgpt.com/codex/settings/general). Reviews are triggered when you - Open a pull request for review - Mark a draft as ready - Comment "@codex review". If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". </details>

src/components/effects/GradientBlinds.tsx

						
				@@ -286,0 +285,4 @@

				      if (entries && entries.length > 0) {

				        const entry = entries[0];

				        width = entry.contentRect.width;

chatgpt-codex-connector[bot] (Migrated from github.com) commented

2026-02-03 01:49:51 +00:00

Add explicit numeric type for width/height

With strict: true in tsconfig.json (which enables noImplicitAny), let width, height; is an implicit any and will fail pnpm exec tsc --noEmit (or any strict type check). This is a build-breaking regression introduced by the change; please add an explicit number type or initialize the variables (e.g., let width = 0, height = 0) so the file type-checks again.

Useful? React with 👍 / 👎.

**![P1 Badge](https://img.shields.io/badge/P1-orange?style=flat) Add explicit numeric type for width/height** With `strict: true` in `tsconfig.json` (which enables `noImplicitAny`), `let width, height;` is an implicit `any` and will fail `pnpm exec tsc --noEmit` (or any strict type check). This is a build-breaking regression introduced by the change; please add an explicit `number` type or initialize the variables (e.g., `let width = 0, height = 0`) so the file type-checks again. Useful? React with 👍 / 👎.

copilot-pull-request-reviewer[bot] (Migrated from github.com) reviewed 2026-02-03 01:50:27 +00:00

copilot-pull-request-reviewer[bot] (Migrated from github.com) left a comment

Pull request overview

This PR optimizes the resize performance of the GradientBlinds component by reducing layout thrashing during resize events. The optimization uses ResizeObserverEntry.contentRect for dimension calculations and defers the getBoundingClientRect() call to requestAnimationFrame().

Changes:

Modified the resize function to accept an optional ResizeObserverEntry[] parameter
When called from ResizeObserver, uses contentRect.width and contentRect.height for dimensions
Defers getBoundingClientRect() call to requestAnimationFrame to avoid forcing layout recalculation

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

## Pull request overview This PR optimizes the resize performance of the GradientBlinds component by reducing layout thrashing during resize events. The optimization uses `ResizeObserverEntry.contentRect` for dimension calculations and defers the `getBoundingClientRect()` call to `requestAnimationFrame()`. **Changes:** - Modified the `resize` function to accept an optional `ResizeObserverEntry[]` parameter - When called from ResizeObserver, uses `contentRect.width` and `contentRect.height` for dimensions - Defers `getBoundingClientRect()` call to `requestAnimationFrame` to avoid forcing layout recalculation --- 💡 <a href="/ragusa-it/ragusaitweb/new/main/.github/instructions?filename=*.instructions.md" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Add Copilot custom instructions</a> for smarter, more guided reviews. <a href="https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Learn how to get started</a>.

src/components/effects/GradientBlinds.tsx

						
				@@ -286,0 +295,4 @@

				          }

				        });

				      } else {

				        const rect = container.getBoundingClientRect();

copilot-pull-request-reviewer[bot] (Migrated from github.com) commented

2026-02-03 01:50:27 +00:00

The requestAnimationFrame callback could execute after the component has unmounted. While there is a check for rendererRef.current, this doesn't prevent the container.getBoundingClientRect() call if the component unmounts between the check and the call. This could lead to accessing a detached DOM element.

Add a cleanup mechanism to cancel pending requestAnimationFrame callbacks, or store the RAF ID and cancel it in the useEffect cleanup function. Alternatively, add an additional check that the container is still in the document before calling getBoundingClientRect().

          // Ensure renderer is still active and container is still in the document
          if (
            !rendererRef.current ||
            typeof document === 'undefined' ||
            !container ||
            !(container as HTMLElement).isConnected ||
            !document.body.contains(container)
          ) {
            return;
          }

          rectRef.current = container.getBoundingClientRect();

The requestAnimationFrame callback could execute after the component has unmounted. While there is a check for rendererRef.current, this doesn't prevent the container.getBoundingClientRect() call if the component unmounts between the check and the call. This could lead to accessing a detached DOM element. Add a cleanup mechanism to cancel pending requestAnimationFrame callbacks, or store the RAF ID and cancel it in the useEffect cleanup function. Alternatively, add an additional check that the container is still in the document before calling getBoundingClientRect(). ```suggestion // Ensure renderer is still active and container is still in the document if ( !rendererRef.current || typeof document === 'undefined' || !container || !(container as HTMLElement).isConnected || !document.body.contains(container) ) { return; } rectRef.current = container.getBoundingClientRect(); ```

src/components/effects/GradientBlinds.tsx

						
				@@ -286,0 +296,4 @@

				        });

				      } else {

				        const rect = container.getBoundingClientRect();

				        rectRef.current = rect;

copilot-pull-request-reviewer[bot] (Migrated from github.com) commented

2026-02-03 01:50:27 +00:00

The deferred update of rectRef.current can cause mouse position calculations to use stale position data. When a resize occurs, rectRef.current won't be updated until the next animation frame, but mouse events (via onPointerMove on lines 333-358 and the loop function on lines 360-409) may use the outdated rect during this gap. This can lead to incorrect mouse coordinate calculations, particularly noticeable during rapid resize operations.

Consider updating rectRef.current synchronously using contentRect properties (left, top can be derived from container.getBoundingClientRect() on initial call), or accept that mouse position calculations may be slightly off during resize until the next frame.

        // Use a synchronous rect update so mouse position calculations
        // always see up-to-date geometry during resize.
        const rect = container.getBoundingClientRect();
        rectRef.current = rect;
        width = rect.width;
        height = rect.height;

The deferred update of rectRef.current can cause mouse position calculations to use stale position data. When a resize occurs, rectRef.current won't be updated until the next animation frame, but mouse events (via onPointerMove on lines 333-358 and the loop function on lines 360-409) may use the outdated rect during this gap. This can lead to incorrect mouse coordinate calculations, particularly noticeable during rapid resize operations. Consider updating rectRef.current synchronously using contentRect properties (left, top can be derived from container.getBoundingClientRect() on initial call), or accept that mouse position calculations may be slightly off during resize until the next frame. ```suggestion // Use a synchronous rect update so mouse position calculations // always see up-to-date geometry during resize. const rect = container.getBoundingClientRect(); rectRef.current = rect; width = rect.width; height = rect.height; ```

Pull request closed

This pull request cannot be reopened because the branch was deleted.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ragusa-it/ragusaitweb#50