refactor(web): organize devtools components

[tomerqodo]

Benchmark PR from agentic-review-benchmarks#8

Summary by CodeRabbit

• Chores
  • Refactored development tool initialization for React Scan and TanStack Devtools with improved lazy-loading and error handling.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Two new lazy-loading wrapper components are introduced for development tools (ReactScanLoader and TanStackDevtoolsLoader) that encapsulate Suspense boundaries and development mode checks. Existing files are updated to import and use these new loaders instead of inline lazy loading logic.

Changes

Cohort / File(s)	Summary
DevTools Loader Components web/app/components/devtools/react-scan/loader.tsx, web/app/components/devtools/tanstack/loader.tsx	New client-side loader components that wrap ReactScan and TanStackDevtoolsWrapper respectively with lazy loading via React.lazy, Suspense boundaries, IS_DEV development mode checks, and error handling fallbacks.
Updated DevTools Consumers web/app/layout.tsx, web/context/query-client.tsx	Replaced inline lazy-loaded devtools imports and Suspense wrapping with direct usage of the new ReactScanLoader and TanStackDevtoolsLoader components; removed redundant IS_DEV gating and Suspense boundaries.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 Hops with glee at organized code,
Loaders bundled, a lighter load,
DevTools tucked in their cozy place,
Suspense and checks keep pace!
Refactored clean, the warren's delight! 🌟

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description only contains 'Benchmark PR from agentic-review-benchmarks#8' and lacks required sections like Summary, Checklist, and detailed change context.	Add a comprehensive Summary section explaining the refactoring changes, include before/after context, and complete the Checklist items to match the repository template.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'refactor(web): organize devtools components' directly matches the primary change of reorganizing devtools components with new loader patterns.
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

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch coderabbit_full_head_refactorweb_organize_devtools_components_pr8

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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