⚡ Bolt: Prevent array recreation on every render in LayerPanels

[Cukurikik]

💡 What: Wrapped [...elements].reverse() inside a useMemo hook in the LayerPanel components for audio-studio and visualizer.
🎯 Why: Calling [...elements].reverse() directly in the render function creates a new array reference and performs an O(N) reversal operation on every single render. This causes unnecessary garbage collection overhead, especially during high-frequency updates like dragging layers.
📊 Impact: Reduces CPU cycles and memory allocations during render phases, particularly when the layer panel is updated rapidly.
🔬 Measurement: Verify by profiling the React render cycle during layer dragging or adding/removing layers. The reversedElements array should only be recalculated when the underlying elements array in the Zustand store changes.

---

PR created automatically by Jules for task 11150255789787734456 started by @Cukurikik

Summary by CodeRabbit

• Refactor
  • Improved rendering performance in audio editor layer panel components through optimization of element list operations.

[google-labs-jules]

👋 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.

[coderabbitai]

📝 Walkthrough

Walkthrough

Two LayerPanel components are optimized to memoize reversed element arrays, replacing inline reverse operations with computed values that recalculate only when the source elements change, avoiding redundant array reversals during re-renders.

Changes

Cohort / File(s)	Summary
Layer Panel Memoization Optimization src/modules/audio-studio/components/waveform-visualizer/editor/LayerPanel.tsx, src/modules/visualizer/components/editor/LayerPanel.tsx	Added useMemo to memoize reversed element arrays, replacing inline [...elements].reverse() calls with memoized values that only recompute when the source elements dependency changes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A hop, a skip, a memo made,
Arrays reversed, no more cascade,
Dependencies watched, computations saved,
Render performance now well-paved! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main optimization: preventing array recreation on every render in LayerPanel components through memoization.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch bolt-layer-panel-memoization-11150255789787734456

---

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

[coderabbitai]

🧹 Nitpick comments (1)

src/modules/visualizer/components/editor/LayerPanel.tsx (1)

176-176: Consider memoizing the ID array for SortableContext.

While reversedElementsMemo is correctly memoized, the .map(e => e.id) creates a new array on every render. This could cause SortableContext to re-render unnecessarily. Since the main performance issue (the O(N) reverse operation) is already addressed, this is a minor optimization, but it would be more consistent to memoize the ID array as well.

♻️ Optional: Memoize the ID array

  const reversedElementsMemo = useMemo(() => [...elements].reverse(), [elements])
+ const reversedElementIds = useMemo(() => reversedElementsMemo.map(e => e.id), [reversedElementsMemo])

  const sensors = useSensors(

Then use it in SortableContext:

            <SortableContext 
-             items={reversedElementsMemo.map(e => e.id)}
+             items={reversedElementIds}
              strategy={verticalListSortingStrategy}
            >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/modules/visualizer/components/editor/LayerPanel.tsx` at line 176,
reversedElementsMemo is memoized but mapping to ids inline creates a new array
each render; create a memoized ids array (e.g. idsMemo = useMemo(() =>
reversedElementsMemo.map(e => e.id), [reversedElementsMemo]) ) and pass that
idsMemo to SortableContext via items={idsMemo} so SortableContext receives a
stable reference and avoids unnecessary re-renders.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/modules/visualizer/components/editor/LayerPanel.tsx`:
- Line 176: reversedElementsMemo is memoized but mapping to ids inline creates a
new array each render; create a memoized ids array (e.g. idsMemo = useMemo(() =>
reversedElementsMemo.map(e => e.id), [reversedElementsMemo]) ) and pass that
idsMemo to SortableContext via items={idsMemo} so SortableContext receives a
stable reference and avoids unnecessary re-renders.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b42ccc79-578c-4128-8f9b-6ac8f45e824a

📥 Commits

Reviewing files that changed from the base of the PR and between 7cab4ed and fddf986.

📒 Files selected for processing (2)

• src/modules/audio-studio/components/waveform-visualizer/editor/LayerPanel.tsx
• src/modules/visualizer/components/editor/LayerPanel.tsx