-
[OPIK-4066] [FE] Improve table loading state UX (#5058)
frostbyte_neo 发布于
2026-02-05 14:47:17 +00:00 - [OPIK-4066] [FE] Improve table loading state UX
Replace loading overlay with Loader component that replaces
table content during loading. Header, search, and filters
remain visible while data loads.- feat: add reusable DataTableStateHandler component for table loading states
- Create DataTableStateHandler component to handle loading, empty, and content states
- Add disabled prop to DataTableRowHeightSelector and ColumnsButton
- Update project tabs to use DataTableStateHandler:
- RulesTab
- AnnotationQueuesTab
- MetricsTab
- TracesSpansTab
- ThreadsTab
- Disable row height and columns controls during loading/empty states
-
revert: remove OnlineEvaluationPage changes (workspace-level page, not project tab)
-
style: fix prettier formatting
-
OPIK-4066 remove messages and disabled controls if the tab is empty
-
OPIK-4066 fix disabled state for search/filters when results are empty
Remove
rows.length > 0fromcanInteractWithTablein all tabs.
Controls should remain enabled when search/filters return 0 results
so users can clear or modify their search criteria.Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com
- OPIK-4066 remove disabled state from table action controls
Per product/design feedback, users need to change date ranges and
filters to make data load faster when tables are slow. Disabled
search creates inconsistency and draws unwanted attention.Removed disabled props from SearchInput, FiltersButton,
DataTableRowHeightSelector, and ColumnsButton in:- TracesSpansTab
- ThreadsTab
- AnnotationQueuesTab
- RulesTab
Loading overlay on table is preserved for visual feedback.
Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com
- OPIK-4066 remove unused disabled prop from ColumnsButton and DataTableRowHeightSelector
Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com
Co-authored-by: Claude Opus 4.5 noreply@anthropic.com
下载附件