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

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

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

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

@@ -0,0 +1,2 @@
export 'payment_item_skeleton.dart';
export 'payments_page_skeleton.dart';

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

@@ -0,0 +1,40 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
/// 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 {
/// Creates a [PaymentItemSkeleton].
const PaymentItemSkeleton({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: [
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),
],
),
);
}
}

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

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