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:
Achintha Isuru
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user