fix: write intelligent timing to query

[astandrik]

Closes #2845

Stand

CI Results

Test Status: ⚠️ FLAKY

📊 Full Report

Total	Passed	Failed	Flaky	Skipped
378	373	0	3	2

Test Changes Summary ⏭️2

⏭️ Skipped Tests (2)

1. Scroll to row, get shareable link, navigate to URL and verify row is scrolled into view (tenant/diagnostics/tabs/queries.test.ts)
2. Copy result button copies to clipboard (tenant/queryEditor/queryEditor.test.ts)

Bundle Size: ✅

Current: 85.41 MB | Main: 85.41 MB
Diff: 2.30 KB (-0.00%)

✅ Bundle size unchanged.

ℹ️ CI Information

• Test recordings for failed tests are available in the full report.
• Bundle size is measured for the entire 'dist' directory.
• 📊 indicates links to detailed reports.
• 🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

## Greptile Summary

Updated On: 2025-09-09 14:53:27 UTC

This review covers only the changes made since the last review, not the entire PR. The latest changes implement "intelligent timing" for query execution duration display by refactoring timing logic from the QueryExecutionStatus component into a dedicated useElapsedDuration custom hook. The key improvement is adaptive refresh rates: queries under 10 seconds receive fast updates (100ms with jitter) for responsive user feedback, while longer queries use slower updates (1000ms) to optimize performance.

The main component now uses this hook and displays millisecond precision (mm:ss.SSS format) for short queries, providing better visibility into quick operations. The implementation includes jitter to prevent synchronized timer updates across multiple queries, which could cause UI performance spikes. This change addresses issue #2845 by improving user experience for short-running queries while maintaining efficient resource usage for longer operations.

The refactoring follows good React patterns by separating timing concerns into a reusable hook, making the main component cleaner and the timing logic more testable. The hook properly handles cleanup with cancellation flags and timer clearing to prevent memory leaks.

Important Files Changed

Changed Files

Filename	Score	Overview
src/components/QueryExecutionStatus/QueryExecutionStatus.tsx	4/5	Refactored to use new useElapsedDuration hook and added millisecond precision formatting for short queries
src/components/QueryExecutionStatus/useElapsedDuration.ts	4/5	New custom hook implementing intelligent timing with adaptive refresh rates and jitter

Confidence score: 4/5

• This PR is safe to merge with minimal risk of breaking existing functionality
• Score reflects well-structured code changes that improve user experience with proper cleanup handling
• Pay close attention to the useEffect dependency pattern in the new hook to ensure timer behavior is correct

[astandrik]

@greptile

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}