refactor(web): organize devtools components

[tomerqodo]

Benchmark PR from agentic-review-benchmarks#8

Summary by CodeRabbit

Refactor

• Refactored development tools initialization with enhanced lazy-loading mechanisms to optimize startup performance in development environments
• Implemented improved error handling and fallback capabilities for development utilities to ensure more reliable tool initialization
• Updated development environment tooling architecture to use more efficient resource loading patterns for better overall performance and responsiveness

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Introduces lazy-loaded devtools components for React Scan and TanStack Devtools that render conditionally in development mode. Creates two new loader components with Suspense-based fallbacks and error handling, then integrates them into the application layout and query client context.

Changes

Cohort / File(s)	Summary
Devtools Loaders web/app/components/devtools/react-scan/loader.tsx, web/app/components/devtools/tanstack/loader.tsx	New lazy-loaded components for React Scan and TanStack Devtools with dev-only conditional rendering, Suspense wrappers, error handling, and fallback no-op components.
Layout & Context Integration web/app/layout.tsx, web/context/query-client.tsx	Updated imports and rendering to use ReactScanLoader and TanStackDevtoolsLoader instead of direct component imports; TanStackDevtoolsLoader now renders unconditionally inside QueryClientProvider.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Lazy loaders hop along,
Devtools bundled, swift and strong,
Suspense and states in dev mode play,
Loading gently, out of the way!
Code that lazily comes to be,
Makes debugging more spree. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is minimal and only references a benchmark PR link. While the template requires a detailed summary with context, motivation, dependencies, and screenshots, the author has only provided a reference to an external benchmark PR without substantive detail.	Provide a comprehensive summary explaining the refactoring objectives, why the devtools components were reorganized, what the expected behavior changes are, and whether any dependencies or documentation updates are needed.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'refactor(web): organize devtools components' is directly aligned with the PR objectives of reorganizing and refactoring devtools components. It clearly and concisely summarizes the main purpose of the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 681571e and 8edc4cf.

📒 Files selected for processing (6)

• web/app/components/devtools/react-scan/loader.tsx
• web/app/components/devtools/react-scan/scan.tsx
• web/app/components/devtools/tanstack/devtools.tsx
• web/app/components/devtools/tanstack/loader.tsx
• web/app/layout.tsx
• web/context/query-client.tsx

🧰 Additional context used

🧬 Code graph analysis (4)

web/context/query-client.tsx (1)

web/app/components/devtools/tanstack/loader.tsx (1)

• TanStackDevtoolsLoader (14-23)

web/app/layout.tsx (1)

web/app/components/devtools/react-scan/loader.tsx (1)

• ReactScanLoader (15-24)

web/app/components/devtools/react-scan/loader.tsx (2)

web/app/components/devtools/react-scan/scan.tsx (1)

• ReactScan (7-22)

web/config/index.ts (1)

• IS_DEV (92-92)

web/app/components/devtools/tanstack/loader.tsx (2)

web/app/components/devtools/tanstack/devtools.tsx (1)

• TanStackDevtoolsWrapper (8-23)

web/config/index.ts (1)

• IS_DEV (92-92)

🔇 Additional comments (4)

web/app/components/devtools/tanstack/loader.tsx (1)

1-22: Clean dev-only lazy loader.
Looks good; the dev guard and Suspense wrapper implement the intended pattern clearly.

web/context/query-client.tsx (1)

3-23: Loader integration looks good.
Centralizing devtools rendering in the query initializer keeps the dev-only logic contained in the loader.

web/app/components/devtools/react-scan/loader.tsx (1)

1-23: Solid dev-only loader with safe fallback.
The lazy import, Suspense fallback, and error handling look good for a devtool component.

web/app/layout.tsx (1)

11-115: Loader swap is consistent with the refactor.
Switching to ReactScanLoader matches the new devtools loading pattern.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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