Skip to content

fix: defer collapse of current panel to next frame for smoother trans…#1613

Merged
shahar-biron merged 3 commits intostagingfrom
fix-panel
Apr 9, 2026
Merged

fix: defer collapse of current panel to next frame for smoother trans…#1613
shahar-biron merged 3 commits intostagingfrom
fix-panel

Conversation

@Anchel123
Copy link
Copy Markdown
Contributor

@Anchel123 Anchel123 commented Apr 9, 2026

…itions

Summary by CodeRabbit

  • Bug Fixes
    • Panel collapse now defers the collapse to the next animation frame for smoother transitions when navigating routes.
    • Ensures the collapse only proceeds if still needed and cancels any scheduled collapse when navigation changes or the view unmounts.
    • Expand behavior for specific routes remains unchanged.

@overcut-ai
Copy link
Copy Markdown

overcut-ai bot commented Apr 9, 2026

Completed Working on "Code Review"

✅ Code review complete. No issues found - all changes look good! ✅

✅ Workflow completed successfully.


👉 View complete log

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 9, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
falkordb-browser Ready Ready Preview, Comment Apr 9, 2026 9:07am

Request Review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 9, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3dbb82b3-e7e9-4938-a9b1-4930acb34d9a

📥 Commits

Reviewing files that changed from the base of the PR and between 41b5704 and 6d8d3c7.

📒 Files selected for processing (1)
  • app/providers.tsx

Walkthrough

The panel collapse effect in ProvidersWithSession now defers collapsing to the next animation frame for routes that are neither /graph (with graphName) nor /udf, re-checking !currentPanel.isCollapsed() before collapsing and cancelling the scheduled frame on cleanup.

Changes

Cohort / File(s) Summary
Panel Collapse Timing Optimization
app/providers.tsx
Replaced immediate currentPanel.collapse() with a requestAnimationFrame-scheduled collapse that re-checks !currentPanel.isCollapsed() before collapsing; added cleanup to cancel the scheduled animation frame.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

⏳ A panel waits for the frame,
A gentle check, no sudden claim,
Defer, confirm, then softly close—
Timing tuned where patience grows. 🎬

Suggested PR titles:

  • feat(ui): defer panel collapse to next animation frame in ProvidersWithSession
  • fix(ui): guard and cancel animation-frame-based panel collapse
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: deferring panel collapse to the next animation frame for smoother transitions, which aligns perfectly with the code modifications in app/providers.tsx.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✏️ 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 fix-panel

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 9, 2026

🔒 Trivy Security Scan Results


Report Summary

┌───────────────────────────────────────────────────────────────────────────┬──────────┬─────────────────┐
│                                  Target                                   │   Type   │ Vulnerabilities │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ falkordb/falkordb-browser:test (alpine 3.22.3)                            │  alpine  │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@falkordb/text-to-cypher/package.json                    │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@img/colour/package.json                                 │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@img/sharp-libvips-linux-x64/package.json                │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@img/sharp-libvips-linuxmusl-x64/package.json            │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@img/sharp-linux-x64/package.json                        │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@img/sharp-linuxmusl-x64/package.json                    │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@js-temporal/polyfill/package.json                       │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@next/env/package.json                                   │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@redis/bloom/package.json                                │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@redis/client/dist/package.json                          │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@redis/client/package.json                               │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@redis/json/package.json                                 │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@redis/search/package.json                               │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@redis/time-series/package.json                          │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/@swc/helpers/package.json                                │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/client-only/package.json                                 │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/cluster-key-slot/package.json                            │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/detect-libc/package.json                                 │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/falkordb/package.json                                    │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/jsbi/package.json                                        │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/lodash/package.json                                      │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/next/dist/compiled/@edge-runtime/cookies/package.json    │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/next/dist/compiled/@edge-runtime/ponyfill/package.json   │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/next/dist/compiled/@edge-runtime/primitives/package.json │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/next/dist/compiled/react-is/package.json                 │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/next/dist/compiled/regenerator-runtime/package.json      │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/next/package.json                                        │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/react-dom/package.json                                   │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/react/package.json                                       │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/redis/package.json                                       │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/semver/package.json                                      │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/sharp/package.json                                       │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/node_modules/styled-jsx/package.json                                  │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ app/package.json                                                          │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ opt/yarn-v1.22.22/package.json                                            │ node-pkg │        0        │
├───────────────────────────────────────────────────────────────────────────┼──────────┼─────────────────┤
│ usr/local/lib/node_modules/corepack/package.json                          │ node-pkg │        0        │
└───────────────────────────────────────────────────────────────────────────┴──────────┴─────────────────┘
Legend:
- '-': Not scanned
- '0': Clean (no security findings detected)


Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/providers.tsx`:
- Around line 727-733: The scheduled requestAnimationFrame callback that calls
currentPanel.collapse() can run after effect cleanup and collapse the wrong
panel; change the code around the requestAnimationFrame(...) call to capture its
return value (raf id) and cancel it on effect cleanup using
cancelAnimationFrame(rafId) so any pending frame is cleared when
pathname/graphName or the effect unmounts, ensuring currentPanel.isCollapsed()
check/collapse only runs while the effect is still valid.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 62cef230-a169-4313-8d0b-62570e88a126

📥 Commits

Reviewing files that changed from the base of the PR and between 1a7f528 and 41b5704.

📒 Files selected for processing (1)
  • app/providers.tsx

@shahar-biron shahar-biron merged commit ed3b253 into staging Apr 9, 2026
19 checks passed
@shahar-biron shahar-biron deleted the fix-panel branch April 9, 2026 10:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants