Fix advocate table and status bug

[aram-devdocs]

This pull request contains changes generated by a Cursor Cloud Agent

 

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[claude]

Code Review - Navigation Caching Bug Fix

This PR fixes a React Query caching issue where navigating away from and back to the dashboard resulted in stale data, empty tables, and infinite loading spinners.

✅ Strengths

1. Excellent Root Cause Analysis
The documentation file provides exceptional detail with clear reproduction steps, deep dive into React Query caching mechanics, and explicit explanation of why staleTime: 0 + refetchOnWindowFocus: false caused the bug.

2. Consistent Fix Application
Properly applied across all affected query hooks with thoughtful staleTime values:

• useChainInfo → 10s staleTime
• useListCollections → 10s staleTime
• useAuditLogs → 5s staleTime (appropriate for high-frequency data)
• useMetrics → 10s staleTime
• Global defaults set at 30s

3. Prevents Future Regressions
The documentation includes testing checklist, code standards with examples, and architecture patterns for mutations.

🔍 Issues and Recommendations

1. Missing refetchOnMount in Hooks with refetchInterval (Minor)

Issue: usePeers.ts:20 and useValidator.ts:24 use refetchInterval but don't have explicit refetchOnMount: true. While refetchInterval keeps data fresh during normal operation, it won't trigger an immediate refetch when the component remounts if the last interval hasn't elapsed.

Impact: Low - the interval ensures freshness, but there could be a delay (up to 5-10s) on initial mount.

Recommendation: Add refetchOnMount: true to both hooks for immediate data on mount.

2. Inconsistent Query Invalidation (Minor)

Query invalidation patterns are inconsistent:

• useSubmitData.ts:32 invalidates collections ✅
• useSync.ts:25-26 invalidates chain and peers ✅
• useDecryptData.ts has no invalidation

Questions:

• Should useDecryptData invalidate collections or audit-logs since decryption might trigger audit events?
• Should useSubmitData also invalidate chain since new data affects blockchain state?

Recommendation: Document the query invalidation strategy in the caching documentation.

3. Documentation File Location (Minor)

The file .claude/fix-navigation-caching-bug.md is in the root .claude/ directory. Consider moving to:

• docs/architecture/caching-strategy.md
• web/docs/react-query-caching.md
• .claude/docs/caching-strategy.md

4. Missing Test Coverage (Medium Priority)

No tests verify the caching behavior fix. The only test file is apiErrorHandler.test.ts.

Recommendation: Add integration tests to prevent regression. Tests should verify:

• Data refetches when component remounts after navigation
• staleTime prevents unnecessary refetches within freshness window
• No infinite loading states on navigation back

5. Global staleTime: 30000 May Be Too Aggressive (Low Priority)

For a blockchain application with real-time data, 30s global staleTime might lead to unexpected staleness. Consider lowering to 10-15 seconds, or document that all new queries MUST explicitly set staleTime.

🔒 Security Assessment

No security concerns identified. Changes are purely client-side caching configuration.

⚡ Performance Assessment

Positive impact:

• Reduces unnecessary API calls during the 5-30s freshness windows
• refetchOnMount: true ensures data is current when users navigate back
• Appropriate staleTime values balance freshness vs. network load

📖 Code Quality

Follows CLAUDE.md standards:

• ✅ Professional commit message format
• ✅ Technical precision in documentation
• ✅ Layered architecture respected
• ✅ Single source of truth principle

✨ Final Verdict

APPROVE with minor recommendations

This is a high-quality fix with exceptional documentation. The root cause analysis and prevention strategy demonstrate deep understanding of React Query mechanics.

Priority Recommendations:

1. High: Add integration/E2E tests for caching behavior
2. Medium: Add refetchOnMount: true to usePeers and useValidator
3. Low: Document query invalidation strategy
4. Low: Relocate documentation file to docs/ directory

Merge Readiness: ✅ READY

The core fix is solid and addresses the reported issue correctly. Recommendations are improvements, not blockers.