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

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

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

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

@@ -0,0 +1,2 @@
export 'shift_details_page_skeleton.dart';
export 'stat_card_skeleton.dart';

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

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

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

@@ -0,0 +1,28 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
/// Skeleton for a single stat card in the stats row.
class StatCardSkeleton extends StatelessWidget {
/// Creates a [StatCardSkeleton].
const StatCardSkeleton({super.key});
@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),
],
),
);
}
}

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

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

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

@@ -0,0 +1,2 @@
export 'shift_card_skeleton.dart';
export 'shifts_page_skeleton.dart';

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

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

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

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