6177214e-ce7c-49e3-99de-ff9721b26f63 — Commit d8542719
Changed files
.../lib/common/components/shimmer_loader.dart | 65 ++++++++++ .../components/current_bookings_tab_view.dart | 140 ++++++++++++--------- comwell_key_app/pubspec.yaml | 1 + 3 files changed, 146 insertions(+), 60 deletions(-)
Diff
diff --git a/comwell_key_app/lib/common/components/shimmer_loader.dart b/comwell_key_app/lib/common/components/shimmer_loader.dart
new file mode 100644
index 00000000..5ac31687
--- /dev/null
+++ b/comwell_key_app/lib/common/components/shimmer_loader.dart
@@ -0,0 +1,65 @@
+import 'package:comwell_key_app/themes/light_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:shimmer/shimmer.dart';
+
+class ShimmerLoader extends StatelessWidget {
+ const ShimmerLoader({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ final theme = Theme.of(context);
+ return Padding(
+ padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 0),
+ child: Shimmer.fromColors(
+ baseColor: Colors.grey.shade300,
+ highlightColor: Colors.grey.shade100,
+ child: Container(
+ height: 276,
+ decoration: BoxDecoration(
+ color: Colors.white,
+ borderRadius: BorderRadius.circular(10),
+ border: Border.all(color: Colors.transparent),
+ ),
+ child: Padding(
+ padding: const EdgeInsets.all(16),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.end,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ // Image placeholder
+ Container(
+ height: 120,
+ width: double.infinity,
+ decoration: BoxDecoration(
+ color: Colors.grey.shade300,
+ borderRadius: BorderRadius.circular(8),
+ ),
+ ),
+ const SizedBox(height: 16),
+ // Title placeholder
+ Container(
+ height: 24,
+ width: 180,
+ decoration: BoxDecoration(
+ color: Colors.grey.shade400,
+ borderRadius: BorderRadius.circular(4),
+ ),
+ ),
+ const SizedBox(height: 6),
+ // Subtitle placeholder
+ Container(
+ height: 16,
+ width: 120,
+ decoration: BoxDecoration(
+ color: sandColor[80],
+ borderRadius: BorderRadius.circular(4),
+ ),
+ ),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+}
\ No newline at end of file
diff --git a/comwell_key_app/lib/overview/components/current_bookings_tab_view.dart b/comwell_key_app/lib/overview/components/current_bookings_tab_view.dart
index 7481871e..8d79d5be 100644
--- a/comwell_key_app/lib/overview/components/current_bookings_tab_view.dart
+++ b/comwell_key_app/lib/overview/components/current_bookings_tab_view.dart
@@ -4,6 +4,8 @@ import 'package:comwell_key_app/overview/models/booking.dart';
import 'package:comwell_key_app/themes/light_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:shimmer/shimmer.dart';
+import 'package:comwell_key_app/common/components/shimmer_loader.dart';
class CurrentBookingsTabView extends StatelessWidget {
final Iterable<Booking> bookings;
@@ -23,71 +25,89 @@ class CurrentBookingsTabView extends StatelessWidget {
Widget build(BuildContext context) {
final theme = Theme.of(context);
final cubit = context.read<OverviewCubit>();
- return RefreshIndicator(
- backgroundColor: sandColor[80],
- color: sandColor[10],
- onRefresh: () async {
- await cubit.fetchBookings();
- },
- child: Builder(
- builder: (context) {
- if (bookings.isEmpty) {
- return ListView(
- children: [
- const SizedBox(
- height: 20,
- ),
- Container(
- height: 276,
- decoration: BoxDecoration(
- image: const DecorationImage(
- image: AssetImage("assets/images/no_current_bookings_background.jpeg"),
- fit: BoxFit.cover,
- ),
- borderRadius: BorderRadius.circular(10),
- border: Border.all(color: Colors.transparent)),
- margin: const EdgeInsets.symmetric(horizontal: 8),
- child: Padding(
- padding: const EdgeInsets.all(16),
- child: Column(
- mainAxisAlignment: MainAxisAlignment.end,
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Text(
- bookingsTitle,
- textAlign: TextAlign.start,
- style: theme.textTheme.headlineMedium?.copyWith(
- color: Colors.white,
- ),
+ return BlocBuilder<OverviewCubit, OverviewState>(
+ builder: (context, state) {
+ if (state is OverviewLoading) {
+ // Show shimmer loader while loading
+ return ListView(
+ children: const [
+ SizedBox(height: 20),
+ ShimmerLoader(),
+ SizedBox(height: 20),
+ ShimmerLoader(),
+ SizedBox(height: 40),
+ ShimmerLoader(),
+ ],
+ );
+ }
+ return RefreshIndicator(
+ backgroundColor: sandColor[80],
+ color: sandColor[10],
+ onRefresh: () async {
+ await cubit.fetchBookings();
+ },
+ child: Builder(
+ builder: (context) {
+ if (bookings.isEmpty) {
+ return ListView(
+ children: [
+ const SizedBox(
+ height: 20,
+ ),
+ Container(
+ height: 276,
+ decoration: BoxDecoration(
+ image: const DecorationImage(
+ image: AssetImage(
+ "assets/images/no_current_bookings_background.jpeg"),
+ fit: BoxFit.cover,
),
- const SizedBox(height: 6),
- Text(
- textAlign: TextAlign.start,
- bookingsSubtitle,
- style: theme.textTheme.bodySmall?.copyWith(
- color: Colors.grey.shade500,
+ borderRadius: BorderRadius.circular(10),
+ border: Border.all(color: Colors.transparent)),
+ margin: const EdgeInsets.symmetric(horizontal: 8),
+ child: Padding(
+ padding: const EdgeInsets.all(16),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.end,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Text(
+ bookingsTitle,
+ textAlign: TextAlign.start,
+ style: theme.textTheme.headlineMedium?.copyWith(
+ color: Colors.white,
+ ),
),
- ),
- ],
+ const SizedBox(height: 6),
+ Text(
+ textAlign: TextAlign.start,
+ bookingsSubtitle,
+ style: theme.textTheme.bodySmall?.copyWith(
+ color: Colors.grey.shade500,
+ ),
+ ),
+ ],
+ ),
),
),
+ const SizedBox(
+ height: 40,
+ ),
+ ],
+ );
+ } else {
+ return ListView.builder(
+ shrinkWrap: true,
+ itemCount: bookings.length,
+ itemBuilder: (context, index) => CurrentBookingListItem(
+ booking: bookings.elementAt(index),
),
- const SizedBox(
- height: 40,
- ),
- ],
- );
- } else {
- return ListView.builder(
- shrinkWrap: true,
- itemCount: bookings.length,
- itemBuilder: (context, index) => CurrentBookingListItem(
- booking: bookings.elementAt(index),
- ),
- );
- }
- },
- ),
+ );
+ }
+ },
+ ),
+ );
+ },
);
}
}
diff --git a/comwell_key_app/pubspec.yaml b/comwell_key_app/pubspec.yaml
index 540ad97b..774b7291 100644
--- a/comwell_key_app/pubspec.yaml
+++ b/comwell_key_app/pubspec.yaml
@@ -56,6 +56,7 @@ dependencies:
share_plus: ^10.1.4
shared_preferences: ^2.5.3
snapping_sheet: ^3.1.0
+ shimmer: ^3.0.0
dependency_overrides:
#Remove override when slider button updates