refactor(web): organize devtools components

[tomerqodo]

Benchmark PR from qodo-benchmark#449

[greptile-apps]

Greptile Summary

Reorganized devtools components into dedicated directory structure, separating React Scan and TanStack devtools into their own subdirectories with dedicated loader components.

• Created new loader components (loader.tsx) for both React Scan and TanStack devtools that encapsulate lazy loading logic with IS_DEV checks
• Moved react-scan.tsx to devtools/react-scan/scan.tsx and devtools.tsx to devtools/tanstack/devtools.tsx
• Updated imports in layout.tsx and query-client.tsx to use the new loader components
• Improved code organization by removing inline lazy loading logic from consuming components
• Added error handling in React Scan loader with fallback to null component

This refactoring improves maintainability by consolidating devtools loading patterns and organizing related files together.

Confidence Score: 4/5

• Safe to merge with one minor style issue to address
• This is a straightforward refactoring that reorganizes devtools components without changing functionality. The only issue found is a console.error statement that violates project style guidelines (Rule 25). All imports are updated correctly, and the code structure is improved. The changes are well-isolated to devtools and don't affect production code paths.
• web/app/components/devtools/react-scan/loader.tsx contains a console.error statement that should be removed per project guidelines

Important Files Changed

Filename	Overview
web/app/components/devtools/react-scan/loader.tsx	New loader component for React Scan devtools with lazy loading and error handling, contains console.error statement
web/app/components/devtools/tanstack/loader.tsx	New loader component for TanStack devtools with lazy loading and silent error handling
web/app/layout.tsx	Updated import path for ReactScanLoader from new organized location
web/context/query-client.tsx	Simplified by using new TanStackDevtoolsLoader component instead of inline lazy loading

Sequence Diagram

sequenceDiagram
    participant App as App Entry Point
    participant Layout as layout.tsx
    participant RSLoader as ReactScanLoader
    participant RSScan as React Scan (scan.tsx)
    participant QueryContext as TanstackQueryInitializer
    participant TSLoader as TanStackDevtoolsLoader
    participant TSDevtools as TanStackDevtoolsWrapper

    App->>Layout: Render root layout
    Layout->>RSLoader: Mount ReactScanLoader
    
    alt IS_DEV === true
        RSLoader->>RSLoader: Lazy import scan.tsx
        RSLoader->>RSScan: Render with Suspense
        RSScan->>RSScan: Initialize react-scan with config
    else IS_DEV === false
        RSLoader->>RSLoader: Return null
    end

    Layout->>QueryContext: Wrap children in QueryClientProvider
    QueryContext->>TSLoader: Mount TanStackDevtoolsLoader
    
    alt IS_DEV === true
        TSLoader->>TSLoader: Lazy import devtools.tsx
        TSLoader->>TSDevtools: Render with Suspense
        TSDevtools->>TSDevtools: Initialize TanStack devtools
    else IS_DEV === false
        TSLoader->>TSLoader: Return null
    end
    
    QueryContext->>App: Render children components

Loading

[greptile-apps]

_{6 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: Remove console.error statement per project rules (Rule 25: Frontend Code Must Not Use console Statements)

Suggested change

	console.error('Failed to load React Scan devtools:', error)
	})).catch(() => {

Context Used: Context from dashboard - CLAUDE.md (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: web/app/components/devtools/react-scan/loader.tsx
Line: 10:10

Comment:
**style:** Remove `console.error` statement per project rules (Rule 25: Frontend Code Must Not Use console Statements)

```suggestion
  })).catch(() => {
```

**Context Used:** Context from `dashboard` - CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=a5f96311-5bd1-49f2-9828-2ee0c089c012))

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.