Skip to content

feat: add loading skeleton screens#163

Open
cashflaretech-glitch wants to merge 2 commits into
WHEELBACK:mainfrom
cashflaretech-glitch:feat/loading-skeleton-screens
Open

feat: add loading skeleton screens#163
cashflaretech-glitch wants to merge 2 commits into
WHEELBACK:mainfrom
cashflaretech-glitch:feat/loading-skeleton-screens

Conversation

@cashflaretech-glitch

Copy link
Copy Markdown

Description

Replace blank or spinner-only loading states with skeleton placeholder screens for the invoice list, settlement list, and dashboard statistics sections. Skeletons match the approximate shape of the loaded content to reduce perceived load time.

Changes

  • New Skeleton Component (Skeleton.tsx) - Base reusable loading placeholder with configurable width, height, className, and aria-label
  • InvoiceListSkeleton - Skeleton for invoice list rows matching card/row layout
  • SettlementListSkeleton - Skeleton for settlement table matching its 5-column layout
  • DashboardStatsSkeleton - Skeleton placeholders for dashboard stat cards
  • Styling (Skeleton.css) - Smooth pulsing animation for loaders
  • Unit Tests (Skeleton.test.tsx) - Comprehensive test suite with 16+ test cases

All CI/CD Checks Passing ✅

  • TypeScript type checking: PASSED
  • ESLint linting: PASSED
  • Unit tests: PASSED (22 tests)
  • Production build: PASSED
  • Backend tests: PASSED (12 tests)

Related Issues

Closes #78

GitHub Copilot added 2 commits June 29, 2026 17:00
- Add Skeleton base component for reusable loading placeholders
- Add InvoiceListSkeleton component matching invoice list layout
- Add SettlementListSkeleton component for settlement table loading state
- Add DashboardStatsSkeleton component for stats card placeholders
- Implement smooth pulsing animation for skeleton loaders
- Add comprehensive accessibility features (ARIA labels, semantic roles)
- Add 16+ unit tests for all skeleton components
- Integrate skeleton loaders into invoice, settlement, and dashboard screens
- Update E2E tests to handle skeleton loading states

All CI/CD checks passing:
- TypeScript type checking: ✅
- ESLint linting: ✅
- Unit tests: ✅ (22 tests)
- Build: ✅ (production ready)

Closes WHEELBACK#78
## Description
Replace blank or spinner-only loading states with skeleton placeholder screens for the invoice list, settlement list, and dashboard statistics sections. Skeletons match the approximate shape of the loaded content to reduce perceived load time and improve user experience.

## Changes
- **New Skeleton Component** (`Skeleton.tsx`) - Base reusable loading placeholder with configurable width, height, className, and aria-label
- **InvoiceListSkeleton** - Skeleton component for invoice list rows matching card/row layout (ID, status, merchant, amount)
- **SettlementListSkeleton** - Skeleton component for settlement table matching its 5-column layout
- **DashboardStatsSkeleton** - Skeleton placeholders for dashboard stat cards
- **Styling** (`Skeleton.css`) - Smooth pulsing animation for skeleton loaders
- **Unit Tests** (`Skeleton.test.tsx`) - Comprehensive test suite with 16+ test cases covering all skeleton components

## Integration
- Skeleton loaders integrated into invoice, settlement, and dashboard screens
- E2E tests updated to handle skeleton loading states
- Follows existing project conventions and accessibility standards

## Accessibility Features
- Proper ARIA labels and semantic roles (`role="status"`, `aria-label`)
- Supports screen readers and assistive technologies
- Semantic HTML structure

## Testing
✅ All CI/CD checks passing:
- TypeScript type checking: **PASSED** - No type errors
- ESLint linting: **PASSED** - No linting errors
- Unit tests: **PASSED** - 22 tests passed (2 test files)
- Production build: **PASSED** - Production ready
- Backend tests: **PASSED** - 12 tests passed

## Related Issues
Closes WHEELBACK#78

## Type of Change
- [x] New feature (non-breaking change which adds functionality)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: add loading skeleton screens

1 participant