Krow/Krow-workspace
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add shimmer loading skeletons for various pages and components

Browse Source 
- 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:
Achintha Isuru
2026-03-10 13:21:30 -04:00
parent 3f112f5eb7
commit 0f0714c55b
36 changed files with 1594 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/mobile/packages/features/staff/home/lib/src/presentation/pages/worker_home_page.dart
View File

@@ -9,6 +9,7 @@ import 'package:staff_home/src/presentation/widgets/home_page/benefits_section.d
import 'package:staff_home/src/presentation/widgets/home_page/full_width_divider.dart';
import 'package:staff_home/src/presentation/widgets/home_page/home_header.dart';
import 'package:staff_home/src/presentation/widgets/home_page/placeholder_banner.dart';
import 'package:staff_home/src/presentation/widgets/home_page/home_page_skeleton.dart';
import 'package:staff_home/src/presentation/widgets/home_page/quick_actions_section.dart';
import 'package:staff_home/src/presentation/widgets/home_page/recommended_shifts_section.dart';
import 'package:staff_home/src/presentation/widgets/home_page/todays_shifts_section.dart';
@@ -59,8 +60,14 @@ class WorkerHomePage extends StatelessWidget {
),
child: BlocBuilder<HomeCubit, HomeState>(
buildWhen: (previous, current) =>
previous.status != current.status ||
previous.isProfileComplete != current.isProfileComplete,
builder: (context, state) {
if (state.status == HomeStatus.loading ||
state.status == HomeStatus.initial) {
return const HomePageSkeleton();
}
if (!state.isProfileComplete) {
return SizedBox(
height: MediaQuery.of(context).size.height - 300,

201
apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/home_page_skeleton.dart Normal file
View File

@@ -0,0 +1,201 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
/// Shimmer loading skeleton for the staff home page.
///
/// Mimics the loaded layout with quick actions, today's shifts, tomorrow's
/// shifts, recommended shifts, and benefits sections. Displayed while
/// [HomeCubit] is fetching initial data.
class HomePageSkeleton extends StatelessWidget {
/// Creates a [HomePageSkeleton].
const HomePageSkeleton({super.key});
@override
Widget build(BuildContext context) {
return UiShimmer(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Quick actions row (3 circular icons + labels)
const _QuickActionsSkeleton(),
const _SkeletonDivider(),
// Today's Shifts section
const _ShiftSectionSkeleton(),
const _SkeletonDivider(),
// Tomorrow's Shifts section
const _ShiftSectionSkeleton(),
const _SkeletonDivider(),
// Recommended Shifts (horizontal cards)
const _RecommendedSectionSkeleton(),
const _SkeletonDivider(),
// Benefits section
Padding(
padding: const EdgeInsets.symmetric(
horizontal: UiConstants.space4,
vertical: UiConstants.space3,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const UiShimmerSectionHeader(),
const SizedBox(height: UiConstants.space3),
UiShimmerList(
itemCount: 2,
itemBuilder: (index) => const UiShimmerListItem(),
),
],
),
),
],
),
);
}
}
/// Skeleton for the quick actions row (3 circular placeholders with labels).
class _QuickActionsSkeleton extends StatelessWidget {
const _QuickActionsSkeleton();
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: UiConstants.space4,
vertical: UiConstants.space3,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(3, (index) {
return const Expanded(
child: Column(
children: [
UiShimmerCircle(size: 48),
SizedBox(height: UiConstants.space2),
UiShimmerLine(width: 60, height: 12),
],
),
);
}),
),
);
}
}
/// Skeleton for a shift section (section header + 2 shift card placeholders).
class _ShiftSectionSkeleton extends StatelessWidget {
const _ShiftSectionSkeleton();
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: UiConstants.space4,
vertical: UiConstants.space3,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const UiShimmerSectionHeader(),
const SizedBox(height: UiConstants.space3),
UiShimmerList(
itemCount: 2,
itemBuilder: (index) => const _ShiftCardSkeleton(),
),
],
),
);
}
}
/// Skeleton for a single compact shift card on the home page.
class _ShiftCardSkeleton extends StatelessWidget {
const _ShiftCardSkeleton();
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(UiConstants.space3),
decoration: BoxDecoration(
border: Border.all(color: UiColors.border),
borderRadius: UiConstants.radiusLg,
),
child: const Row(
children: [
UiShimmerBox(width: 48, height: 48),
SizedBox(width: UiConstants.space3),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
UiShimmerLine(width: 160, height: 14),
SizedBox(height: UiConstants.space2),
UiShimmerLine(width: 120, height: 12),
],
),
),
SizedBox(width: UiConstants.space3),
UiShimmerBox(width: 56, height: 24),
],
),
);
}
}
/// Skeleton for the recommended shifts horizontal scroll section.
class _RecommendedSectionSkeleton extends StatelessWidget {
const _RecommendedSectionSkeleton();
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: UiConstants.space3),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.symmetric(horizontal: UiConstants.space4),
child: UiShimmerSectionHeader(),
),
const SizedBox(height: UiConstants.space3),
SizedBox(
height: 120,
child: ListView.builder(
scrollDirection: Axis.horizontal,
physics: const NeverScrollableScrollPhysics(),
padding: const EdgeInsets.symmetric(
horizontal: UiConstants.space4,
),
itemCount: 3,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.only(right: UiConstants.space3),
child: UiShimmerBox(
width: 200,
height: 120,
borderRadius: UiConstants.radiusLg,
),
),
),
),
],
),
);
}
}
/// A thin full-width divider placeholder matching the home page layout.
class _SkeletonDivider extends StatelessWidget {
const _SkeletonDivider();
@override
Widget build(BuildContext context) {
return const Divider(height: 1, thickness: 0.5, color: UiColors.border);
}
}

47
apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/todays_shifts_section.dart
View File

@@ -35,15 +35,7 @@ class TodaysShiftsSection extends StatelessWidget {
)
: null,
child: state.status == HomeStatus.loading
? const Center(
child: SizedBox(
height: UiConstants.space10,
width: UiConstants.space10,
child: CircularProgressIndicator(
color: UiColors.primary,
),
),
)
? const _ShiftsSectionSkeleton()
: shifts.isEmpty
? EmptyStateWidget(
message: emptyI18n.no_shifts_today,
@@ -66,3 +58,40 @@ class TodaysShiftsSection extends StatelessWidget {
);
}
}
/// Inline shimmer skeleton for the shifts section loading state.
class _ShiftsSectionSkeleton extends StatelessWidget {
const _ShiftsSectionSkeleton();
@override
Widget build(BuildContext context) {
return UiShimmer(
child: UiShimmerList(
itemCount: 2,
itemBuilder: (index) => Container(
padding: const EdgeInsets.all(UiConstants.space3),
decoration: BoxDecoration(
border: Border.all(color: UiColors.border),
borderRadius: UiConstants.radiusLg,
),
child: const Row(
children: [
UiShimmerBox(width: 48, height: 48),
SizedBox(width: UiConstants.space3),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
UiShimmerLine(width: 160, height: 14),
SizedBox(height: UiConstants.space2),
UiShimmerLine(width: 120, height: 12),
],
),
),
],
),
),
),
);
}
}

3
apps/mobile/packages/features/staff/payments/lib/src/presentation/pages/payments_page.dart
View File

@@ -8,6 +8,7 @@ import 'package:core_localization/core_localization.dart';
import '../blocs/payments/payments_bloc.dart';
import '../blocs/payments/payments_event.dart';
import '../blocs/payments/payments_state.dart';
import '../widgets/payments_page_skeleton.dart';
import '../widgets/payment_stats_card.dart';
import '../widgets/payment_history_item.dart';
import '../widgets/earnings_graph.dart';
@@ -41,7 +42,7 @@ class _PaymentsPageState extends State<PaymentsPage> {
},
builder: (BuildContext context, PaymentsState state) {
if (state is PaymentsLoading) {
return const Center(child: CircularProgressIndicator());
return const PaymentsPageSkeleton();
} else if (state is PaymentsError) {
return Center(

148
apps/mobile/packages/features/staff/payments/lib/src/presentation/widgets/payments_page_skeleton.dart Normal file
View File

@@ -0,0 +1,148 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
/// Shimmer loading skeleton for the payments page.
///
/// Mimics the loaded layout: a gradient header with balance and period tabs,
/// an earnings graph placeholder, stat cards, and a recent payments list.
class PaymentsPageSkeleton extends StatelessWidget {
/// Creates a [PaymentsPageSkeleton].
const PaymentsPageSkeleton({super.key});
@override
Widget build(BuildContext context) {
return UiShimmer(
child: SingleChildScrollView(
child: Column(
children: [
// Header section with gradient
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
UiColors.primary,
UiColors.primary.withValues(alpha: 0.8),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
padding: EdgeInsets.fromLTRB(
UiConstants.space5,
MediaQuery.of(context).padding.top + UiConstants.space6,
UiConstants.space5,
UiConstants.space8,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Title placeholder
const UiShimmerLine(width: 120, height: 24),
const SizedBox(height: UiConstants.space6),
// Balance center
const Center(
child: Column(
children: [
UiShimmerLine(width: 100, height: 14),
SizedBox(height: UiConstants.space1),
UiShimmerLine(width: 160, height: 36),
],
),
),
const SizedBox(height: UiConstants.space4),
// Period tabs placeholder
UiShimmerBox(
width: double.infinity,
height: 40,
borderRadius: UiConstants.radiusMd,
),
],
),
),
// Main content offset upwards
Transform.translate(
offset: const Offset(0, -UiConstants.space4),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: UiConstants.space5,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Earnings graph placeholder
UiShimmerBox(
width: double.infinity,
height: 180,
borderRadius: UiConstants.radiusLg,
),
const SizedBox(height: UiConstants.space6),
// Quick stats row
Row(
children: [
Expanded(child: UiShimmerStatsCard()),
const SizedBox(width: UiConstants.space3),
Expanded(child: UiShimmerStatsCard()),
],
),
const SizedBox(height: UiConstants.space8),
// Recent Payments header
const UiShimmerSectionHeader(),
const SizedBox(height: UiConstants.space3),
// Payment history items
UiShimmerList(
itemCount: 4,
itemBuilder: (index) => const _PaymentItemSkeleton(),
),
],
),
),
),
],
),
),
);
}
}
/// Skeleton for a single payment history item.
///
/// Matches the [PaymentHistoryItem] layout with a leading icon, title/subtitle
/// lines, and trailing amount text.
class _PaymentItemSkeleton extends StatelessWidget {
const _PaymentItemSkeleton();
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(UiConstants.space3),
decoration: BoxDecoration(
border: Border.all(color: UiColors.border),
borderRadius: UiConstants.radiusLg,
),
child: const Row(
children: [
UiShimmerCircle(size: 40),
SizedBox(width: UiConstants.space3),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
UiShimmerLine(width: 140, height: 14),
SizedBox(height: UiConstants.space2),
UiShimmerLine(width: 100, height: 12),
],
),
),
SizedBox(width: UiConstants.space3),
UiShimmerLine(width: 60, height: 16),
],
),
);
}
}

5
apps/mobile/packages/features/staff/shifts/lib/src/presentation/pages/shift_details_page.dart
View File

@@ -15,6 +15,7 @@ import '../widgets/shift_details/shift_date_time_section.dart';
import '../widgets/shift_details/shift_description_section.dart';
import '../widgets/shift_details/shift_details_bottom_bar.dart';
import '../widgets/shift_details/shift_details_header.dart';
import '../widgets/shift_details_page_skeleton.dart';
import '../widgets/shift_details/shift_location_section.dart';
import '../widgets/shift_details/shift_schedule_summary_section.dart';
import '../widgets/shift_details/shift_stats_row.dart';
@@ -118,9 +119,7 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
},
builder: (context, state) {
if (state is ShiftDetailsLoading) {
return const Scaffold(
body: Center(child: CircularProgressIndicator()),
);
return const ShiftDetailsPageSkeleton();
}
final Shift displayShift = widget.shift;

7
apps/mobile/packages/features/staff/shifts/lib/src/presentation/pages/shifts_page.dart
View File

@@ -6,6 +6,7 @@ import 'package:core_localization/core_localization.dart';
import 'package:krow_domain/krow_domain.dart';
import '../blocs/shifts/shifts_bloc.dart';
import '../utils/shift_tab_type.dart';
import '../widgets/shifts_page_skeleton.dart';
import '../widgets/tabs/my_shifts_tab.dart';
import '../widgets/tabs/find_shifts_tab.dart';
import '../widgets/tabs/history_shifts_tab.dart';
@@ -196,7 +197,7 @@ class _ShiftsPageState extends State<ShiftsPage> {
// Body Content
Expanded(
child: state.status == ShiftsStatus.loading
? const Center(child: CircularProgressIndicator())
? const ShiftsPageSkeleton()
: state.status == ShiftsStatus.error
? Center(
child: Padding(
@@ -252,7 +253,7 @@ class _ShiftsPageState extends State<ShiftsPage> {
);
case ShiftTabType.find:
if (availableLoading) {
return const Center(child: CircularProgressIndicator());
return const ShiftsPageSkeleton();
}
return FindShiftsTab(
availableJobs: availableJobs,
@@ -260,7 +261,7 @@ class _ShiftsPageState extends State<ShiftsPage> {
);
case ShiftTabType.history:
if (historyLoading) {
return const Center(child: CircularProgressIndicator());
return const ShiftsPageSkeleton();
}
return HistoryShiftsTab(historyShifts: historyShifts);
}

173
apps/mobile/packages/features/staff/shifts/lib/src/presentation/widgets/shift_details_page_skeleton.dart Normal file
View File

@@ -0,0 +1,173 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
/// Shimmer loading skeleton for the shift details page.
///
/// Mimics the loaded layout: a header with icon + text lines, a stats row
/// with three stat cards, and content sections with date/time and location
/// placeholders.
class ShiftDetailsPageSkeleton extends StatelessWidget {
/// Creates a [ShiftDetailsPageSkeleton].
const ShiftDetailsPageSkeleton({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: const UiAppBar(centerTitle: false),
body: UiShimmer(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header: icon box + title/subtitle lines
Padding(
padding: const EdgeInsets.all(UiConstants.space5),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
UiShimmerBox(
width: 114,
height: 100,
borderRadius: UiConstants.radiusMd,
),
const SizedBox(width: UiConstants.space4),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
UiShimmerLine(width: 180, height: 20),
SizedBox(height: UiConstants.space3),
UiShimmerLine(width: 140, height: 14),
SizedBox(height: UiConstants.space1),
UiShimmerLine(width: 200, height: 12),
],
),
),
],
),
),
const Divider(height: 1, thickness: 0.5),
// Stats row: three stat cards
Padding(
padding: const EdgeInsets.all(UiConstants.space5),
child: Row(
children: List.generate(3, (index) {
return Expanded(
child: Padding(
padding: EdgeInsets.only(
left: index > 0 ? UiConstants.space2 : 0,
),
child: const _StatCardSkeleton(),
),
);
}),
),
),
const Divider(height: 1, thickness: 0.5),
// Date / time section
Padding(
padding: const EdgeInsets.all(UiConstants.space5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const UiShimmerLine(width: 100, height: 14),
const SizedBox(height: UiConstants.space3),
Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
UiShimmerLine(width: 80, height: 12),
SizedBox(height: UiConstants.space1),
UiShimmerLine(width: 120, height: 16),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
UiShimmerLine(width: 80, height: 12),
SizedBox(height: UiConstants.space1),
UiShimmerLine(width: 120, height: 16),
],
),
),
],
),
],
),
),
const Divider(height: 1, thickness: 0.5),
// Location section
Padding(
padding: const EdgeInsets.all(UiConstants.space5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
UiShimmerLine(width: 80, height: 14),
SizedBox(height: UiConstants.space3),
UiShimmerLine(height: 14),
SizedBox(height: UiConstants.space2),
UiShimmerLine(width: 240, height: 12),
],
),
),
const Divider(height: 1, thickness: 0.5),
// Description section
Padding(
padding: const EdgeInsets.all(UiConstants.space5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
UiShimmerLine(width: 120, height: 14),
SizedBox(height: UiConstants.space3),
UiShimmerLine(height: 12),
SizedBox(height: UiConstants.space2),
UiShimmerLine(height: 12),
SizedBox(height: UiConstants.space2),
UiShimmerLine(width: 200, height: 12),
],
),
),
],
),
),
),
);
}
}
/// Skeleton for a single stat card in the stats row.
class _StatCardSkeleton extends StatelessWidget {
const _StatCardSkeleton();
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(vertical: UiConstants.space3),
decoration: BoxDecoration(
color: UiColors.bgThird,
borderRadius: UiConstants.radiusMd,
),
child: const Column(
children: [
UiShimmerCircle(size: 40),
SizedBox(height: UiConstants.space2),
UiShimmerLine(width: 50, height: 16),
SizedBox(height: UiConstants.space1),
UiShimmerLine(width: 60, height: 12),
],
),
);
}
}

72
apps/mobile/packages/features/staff/shifts/lib/src/presentation/widgets/shifts_page_skeleton.dart Normal file
View File

@@ -0,0 +1,72 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
/// Shimmer loading skeleton for the shifts page body content.
///
/// Mimics the loaded layout with a section header and a list of shift card
/// placeholders. Used while the initial shifts data is being fetched.
class ShiftsPageSkeleton extends StatelessWidget {
/// Creates a [ShiftsPageSkeleton].
const ShiftsPageSkeleton({super.key});
@override
Widget build(BuildContext context) {
return UiShimmer(
child: Padding(
padding: const EdgeInsets.all(UiConstants.space4),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const UiShimmerSectionHeader(),
const SizedBox(height: UiConstants.space3),
UiShimmerList(
itemCount: 5,
itemBuilder: (index) => const _ShiftCardSkeleton(),
),
],
),
),
);
}
}
/// Skeleton for a single shift card matching the shift list item layout.
///
/// Shows a rounded container with placeholder lines for the shift title,
/// time, location, and a trailing status badge.
class _ShiftCardSkeleton extends StatelessWidget {
const _ShiftCardSkeleton();
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(UiConstants.space4),
decoration: BoxDecoration(
border: Border.all(color: UiColors.border),
borderRadius: UiConstants.radiusLg,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Expanded(
child: UiShimmerLine(width: 180, height: 16),
),
const SizedBox(width: UiConstants.space3),
UiShimmerBox(
width: 64,
height: 24,
borderRadius: UiConstants.radiusFull,
),
],
),
const SizedBox(height: UiConstants.space3),
const UiShimmerLine(width: 140, height: 12),
const SizedBox(height: UiConstants.space2),
const UiShimmerLine(width: 200, height: 12),
],
),
);
}
}