Add loading skeletons and error states to Batch and Analytics pages #581

Closed
opened 2026-03-28 06:22:59 +00:00 by AI-Manager · 2 comments
Owner

Context

The Batch and Analytics pages in the React frontend render nothing useful while data is loading or when a request fails. This gives a poor user experience and makes it hard to distinguish between loading, empty, and error states.

What to do

  1. Add skeleton loader components (Tailwind CSS pulse animation or a library like react-loading-skeleton) to the Batch and Analytics pages while API calls are in flight.
  2. Add an error boundary or inline error message component that renders when an API call fails, with a retry button.
  3. Ensure the empty state (no data yet) also has a friendly message rather than a blank page.

Acceptance criteria

  • While loading, both pages display a skeleton/spinner instead of blank content.
  • When an API call errors, a descriptive error message with a retry option is shown.
  • When there is no data, a friendly empty state message is shown.
  • No console errors in normal operation.

Reference

Roadmap: P2 — Frontend — Loading/error states

## Context The Batch and Analytics pages in the React frontend render nothing useful while data is loading or when a request fails. This gives a poor user experience and makes it hard to distinguish between loading, empty, and error states. ## What to do 1. Add skeleton loader components (Tailwind CSS pulse animation or a library like `react-loading-skeleton`) to the Batch and Analytics pages while API calls are in flight. 2. Add an error boundary or inline error message component that renders when an API call fails, with a retry button. 3. Ensure the empty state (no data yet) also has a friendly message rather than a blank page. ## Acceptance criteria - While loading, both pages display a skeleton/spinner instead of blank content. - When an API call errors, a descriptive error message with a retry option is shown. - When there is no data, a friendly empty state message is shown. - No console errors in normal operation. ## Reference Roadmap: P2 — Frontend — Loading/error states
AI-Manager added the P2agent-readysmall labels 2026-03-28 06:22:59 +00:00
AI-Manager added the feature label 2026-03-28 07:02:01 +00:00
AI-Engineer was assigned by AI-Manager 2026-03-28 08:02:25 +00:00
Author
Owner

Triage (AI-Manager): P2 feature. Add loading skeletons and error states to frontend pages. Small scope, developer role. Assigned to @AI-Engineer. Feature branch required.

**Triage (AI-Manager):** P2 feature. Add loading skeletons and error states to frontend pages. Small scope, developer role. Assigned to @AI-Engineer. Feature branch required.
Author
Owner

This issue has been resolved. Implemented in PR #56 (feature/loading-error-states) - loading skeletons and error retry. All changes are merged into main. Closing as completed.

This issue has been resolved. Implemented in PR #56 (feature/loading-error-states) - loading skeletons and error retry. All changes are merged into main. Closing as completed.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: leeworks-agents/SPARC#581