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 ReorderCardSkeleton and ReorderSectionSkeleton for the client home page.
- Added SpendingCardSkeleton and SpendingSectionSkeleton for spending-related UI.
- Created OrderCardSkeleton and associated skeletons for the view orders page.
- Developed MetricCardSkeleton and MetricsGridSkeleton for reports page metrics.
- Introduced HomePageSkeleton and its components for staff home page.
- Added PaymentItemSkeleton and PaymentsPageSkeleton for payments page.
- Created ShiftDetailsPageSkeleton and related components for shift details.
- Implemented ShiftsPageSkeleton and ShiftCardSkeleton for shifts page.
This commit is contained in:
Achintha Isuru
2026-03-10 14:25:56 -04:00
parent 2d6133aba8
commit 4423775fa1
52 changed files with 1603 additions and 1443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,201 +1 @@
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);
}
}
export 'home_page_skeleton/index.dart';

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

@@ -0,0 +1,66 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'quick_actions_skeleton.dart';
import 'recommended_section_skeleton.dart';
import 'shift_section_skeleton.dart';
import 'skeleton_divider.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(),
),
],
),
),
],
),
);
}
}

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

@@ -0,0 +1,6 @@
export 'home_page_skeleton.dart';
export 'quick_actions_skeleton.dart';
export 'recommended_section_skeleton.dart';
export 'shift_card_skeleton.dart';
export 'shift_section_skeleton.dart';
export 'skeleton_divider.dart';

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

@@ -0,0 +1,32 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
/// Skeleton for the quick actions row (3 circular placeholders with labels).
class QuickActionsSkeleton extends StatelessWidget {
/// Creates a [QuickActionsSkeleton].
const QuickActionsSkeleton({super.key});
@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),
],
),
);
}),
),
);
}
}

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

@@ -0,0 +1,44 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
/// Skeleton for the recommended shifts horizontal scroll section.
class RecommendedSectionSkeleton extends StatelessWidget {
/// Creates a [RecommendedSectionSkeleton].
const RecommendedSectionSkeleton({super.key});
@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,
),
),
),
),
],
),
);
}
}

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

@@ -0,0 +1,37 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
/// Skeleton for a single compact shift card on the home page.
class ShiftCardSkeleton extends StatelessWidget {
/// Creates a [ShiftCardSkeleton].
const ShiftCardSkeleton({super.key});
@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),
],
),
);
}
}

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

@@ -0,0 +1,31 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'shift_card_skeleton.dart';
/// Skeleton for a shift section (section header + 2 shift card placeholders).
class ShiftSectionSkeleton extends StatelessWidget {
/// Creates a [ShiftSectionSkeleton].
const ShiftSectionSkeleton({super.key});
@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(),
),
],
),
);
}
}

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

@@ -0,0 +1,13 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
/// A thin full-width divider placeholder matching the home page layout.
class SkeletonDivider extends StatelessWidget {
/// Creates a [SkeletonDivider].
const SkeletonDivider({super.key});
@override
Widget build(BuildContext context) {
return const Divider(height: 1, thickness: 0.5, color: UiColors.border);
}
}