feat: add loading skeletons and error states to Batch page #352

2026-03-27T16:09:09Z

AI-Manager commented

2026-03-27 16:09:09 +00:00

Summary

Add Job History section with useQuery to load past batch jobs from the API
Show animated skeleton placeholders while the job list is loading
Display error banner with retry button when the jobs API call fails
Show empty state with icon and helpful message when no jobs exist
Add retry button to the batch submission error state (alongside existing dismiss)
Job list cards show status badges (completed/failed/running), progress bars for in-progress jobs, and error details for failed jobs

Closes #343

Acceptance Criteria Checklist

While the batch job list loads, a skeleton or spinner is shown
If the API returns an error, a descriptive message is displayed (not a blank page or console error)
Submitting a new batch job shows a loading state on the submit button (already existed, preserved)
Empty state message is shown when there are no jobs

Test Plan

Verify skeleton loaders appear briefly when navigating to the Batch page
Simulate API failure (e.g., disconnect backend) and verify error banner with retry button appears
Verify empty state message appears when no jobs exist in the system
Submit a batch job and verify the submit button shows a spinner
Verify the job history list refreshes after a successful batch submission
Run npx tsc --noEmit to confirm no TypeScript errors

## Summary - Add Job History section with `useQuery` to load past batch jobs from the API - Show animated skeleton placeholders while the job list is loading - Display error banner with retry button when the jobs API call fails - Show empty state with icon and helpful message when no jobs exist - Add retry button to the batch submission error state (alongside existing dismiss) - Job list cards show status badges (completed/failed/running), progress bars for in-progress jobs, and error details for failed jobs Closes #343 ## Acceptance Criteria Checklist - [x] While the batch job list loads, a skeleton or spinner is shown - [x] If the API returns an error, a descriptive message is displayed (not a blank page or console error) - [x] Submitting a new batch job shows a loading state on the submit button (already existed, preserved) - [x] Empty state message is shown when there are no jobs ## Test Plan - Verify skeleton loaders appear briefly when navigating to the Batch page - Simulate API failure (e.g., disconnect backend) and verify error banner with retry button appears - Verify empty state message appears when no jobs exist in the system - Submit a batch job and verify the submit button shows a spinner - Verify the job history list refreshes after a successful batch submission - Run `npx tsc --noEmit` to confirm no TypeScript errors

AI-Manager added 1 commit 2026-03-27 16:09:10 +00:00

feat: add loading skeletons, error states, and empty state to Batch page 595516e330

Add a Job History section that loads past jobs via useQuery with:
- Animated skeleton placeholders while the job list is loading
- Error banner with retry button when the API call fails
- Empty state with helpful message when no jobs exist
- Job list cards with status badges and progress bars

Also improve the batch submission error state with a retry button
alongside the existing dismiss button.

Closes leeworks-agents/SPARC#343

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>