feat: add shimmer loading skeletons for various pages and components
- Implemented UiShimmer as a core shimmer wrapper for animated gradient effects. - Created shimmer presets for list items, stats cards, section headers, and more. - Developed specific skeletons for billing, invoices, coverage, hubs, reports, payments, shifts, and home pages. - Enhanced user experience by providing visual placeholders during data loading.
This commit is contained in:
22
.claude/agent-memory/mobile-architecture-reviewer/MEMORY.md
Normal file
22
.claude/agent-memory/mobile-architecture-reviewer/MEMORY.md
Normal file
@@ -0,0 +1,22 @@
|
||||
# Mobile Architecture Reviewer Memory
|
||||
|
||||
## Project Structure
|
||||
- Features: `apps/mobile/packages/features/{client,staff}/<feature>/`
|
||||
- Design System: `apps/mobile/packages/design_system/`
|
||||
- Shimmer primitives: `design_system/lib/src/widgets/shimmer/` (UiShimmer, UiShimmerBox, UiShimmerCircle, UiShimmerLine, presets)
|
||||
- UiConstants spacing: space0=0, space1=4, space2=8, space3=12, space4=16, space5=20, space6=24, space8=32, space10=40, space12=48
|
||||
|
||||
## Design System Conventions
|
||||
- `UiConstants.radiusLg`, `radiusMd`, `radiusSm`, `radiusFull` are `static final` (not const) - cannot use `const` at call sites
|
||||
- Shimmer placeholder dimensions (width/height of boxes/lines/circles) are visual content sizes, not spacing - the design system presets use UiConstants for these too
|
||||
- `Divider(height: 1, thickness: 0.5)` is a common pattern in the codebase for thin dividers
|
||||
|
||||
## Common Pre-Existing Issues (Do Not Flag as New)
|
||||
- Report detail pages use hardcoded `top: 60` for AppBar clearance (all 6 report pages)
|
||||
- Payments page and billing page have hardcoded strings (pre-existing, not part of shimmer changes)
|
||||
- `shift_details_page.dart` has hardcoded strings and Navigator.of usage (pre-existing)
|
||||
|
||||
## Review Patterns
|
||||
- Skeleton files are pure presentation widgets (StatelessWidget) - no BLoC, no business logic, no navigation
|
||||
- Skeleton files only import `design_system` and `flutter/material.dart` - clean dependency
|
||||
- Barrel file `index.dart` in `reports_page/` widgets dir is an internal barrel, not public API
|
||||
42
.claude/agent-memory/mobile-builder/MEMORY.md
Normal file
42
.claude/agent-memory/mobile-builder/MEMORY.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# Mobile Builder Agent Memory
|
||||
|
||||
## Design System - Shimmer Primitives
|
||||
- Shimmer widgets are in `packages/design_system/lib/src/widgets/shimmer/`
|
||||
- Available: `UiShimmer`, `UiShimmerBox`, `UiShimmerCircle`, `UiShimmerLine`, `UiShimmerListItem`, `UiShimmerStatsCard`, `UiShimmerSectionHeader`, `UiShimmerList`
|
||||
- `UiShimmerList.itemBuilder` takes `(int index)` -- single parameter, not `(BuildContext, int)`
|
||||
- `UiShimmerBox.borderRadius` accepts `BorderRadius?` (nullable), uses `UiConstants.radiusMd` as default
|
||||
- All shimmer shapes render as solid white containers; the parent `UiShimmer` applies the animated gradient
|
||||
- Exported via `design_system.dart` barrel
|
||||
|
||||
## Staff App Feature Locations
|
||||
- Shifts: `packages/features/staff/shifts/` -- has ShiftsPage (tabbed: MyShifts/Find/History) + ShiftDetailsPage
|
||||
- Home: `packages/features/staff/home/` -- WorkerHomePage with sections (TodaysShifts, TomorrowsShifts, Recommended, Benefits, QuickActions)
|
||||
- Payments: `packages/features/staff/payments/` -- PaymentsPage with gradient header + stats + payment history
|
||||
- Home cubit: `HomeStatus` enum (initial, loading, loaded, error)
|
||||
- Shifts bloc: `ShiftsStatus` enum + sub-loading flags (`availableLoading`, `historyLoading`)
|
||||
- Payments bloc: uses sealed state classes (`PaymentsLoading`, `PaymentsLoaded`, `PaymentsError`)
|
||||
|
||||
## UiConstants Spacing Tokens
|
||||
- Use `UiConstants.space1` through `UiConstants.space24` for spacing
|
||||
- Radius: `UiConstants.radiusSm`, `radiusMd`, `radiusLg`, `radiusFull`, `radiusBase`, `radiusMdValue` (double)
|
||||
- `UiConstants.radiusFull` is a `BorderRadius`, `UiConstants.radiusMdValue` is a `double`
|
||||
|
||||
## Barrel Files (Staff Features)
|
||||
- Shifts: `lib/staff_shifts.dart` exports modules only
|
||||
- Payments: `lib/staff_payements.dart` (note: typo in filename) exports module only
|
||||
- Home: `lib/staff_home.dart` exports module only
|
||||
- These barrel files only export modules, not individual widgets -- skeleton widgets don't need to be added
|
||||
|
||||
## Client App Feature Locations
|
||||
- Coverage: `packages/features/client/client_coverage/`
|
||||
- Home: `packages/features/client/home/` (no loading spinner -- renders default data during load)
|
||||
- Billing: `packages/features/client/billing/` (billing_page, pending_invoices_page, invoice_ready_page)
|
||||
- Reports: `packages/features/client/reports/` (reports_page with metrics_grid, plus 6 sub-report pages)
|
||||
- Reports barrel: `widgets/reports_page/index.dart`
|
||||
- Hubs: `packages/features/client/hubs/` (client_hubs_page + hub_details_page + edit_hub_page)
|
||||
|
||||
## Key Patterns Observed
|
||||
- BenefitsOverviewPage also has CircularProgressIndicator (not shimmer-ified yet)
|
||||
- ShiftDetailsPage has a dialog-level spinner in the "applying" dialog -- this is intentional, not a page loading state
|
||||
- Hub details/edit pages use CircularProgressIndicator as action overlays (save/delete) -- keep as-is, not initial load
|
||||
- Client home page has no loading spinner; it renders with default empty dashboard data
|
||||
Reference in New Issue
Block a user