diff --git a/lib/core/widgets/app_shell.dart b/lib/core/widgets/app_shell.dart index edf42e7..c1d1adc 100644 --- a/lib/core/widgets/app_shell.dart +++ b/lib/core/widgets/app_shell.dart @@ -83,7 +83,22 @@ class _AppShellState extends State { child: const HomeHeader(), ), Expanded( - child: widget.child, + child: AnimatedSwitcher( + duration: const Duration(milliseconds: 250), + switchInCurve: Curves.easeOut, + switchOutCurve: Curves.easeIn, + transitionBuilder: (child, animation) { + return FadeTransition( + opacity: animation, + child: child, + ); + }, + child: SizedBox( + key: ValueKey(widget.child.runtimeType.hashCode ^ + widget.child.hashCode), + child: widget.child, + ), + ), ), ], ), diff --git a/lib/features/agents/presentation/screens/agent_network_screen.dart b/lib/features/agents/presentation/screens/agent_network_screen.dart index 26d05df..d8afcd0 100644 --- a/lib/features/agents/presentation/screens/agent_network_screen.dart +++ b/lib/features/agents/presentation/screens/agent_network_screen.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:go_router/go_router.dart'; import 'package:intl/intl.dart'; +import 'package:shimmer/shimmer.dart'; import 'package:real_estate_mobile/core/constants/app_colors.dart'; import 'package:real_estate_mobile/core/widgets/s3_image.dart'; import 'package:real_estate_mobile/features/agents/presentation/providers/agent_network_provider.dart'; @@ -15,8 +16,27 @@ class AgentNetworkScreen extends ConsumerWidget { final state = ref.watch(agentNetworkProvider); if (state.isLoading) { - return const Center( - child: CircularProgressIndicator(color: AppColors.accentOrange)); + return Shimmer.fromColors( + baseColor: const Color(0xFFE8E8E8), + highlightColor: const Color(0xFFF5F5F5), + child: ListView.builder( + padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16), + physics: const NeverScrollableScrollPhysics(), + itemCount: 4, + itemBuilder: (_, __) => Padding( + padding: const EdgeInsets.only(bottom: 16), + child: Row(children: [ + Container(width: 56, height: 56, decoration: const BoxDecoration(shape: BoxShape.circle, color: Colors.white)), + const SizedBox(width: 12), + Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ + Container(height: 14, width: 130, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(4))), + const SizedBox(height: 8), + Container(height: 12, width: 180, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(4))), + ])), + ]), + ), + ), + ); } if (state.error != null) { return _buildError(context, ref, state.error!); diff --git a/lib/features/agents/presentation/screens/agent_search_screen.dart b/lib/features/agents/presentation/screens/agent_search_screen.dart index da3b2bc..0279d01 100644 --- a/lib/features/agents/presentation/screens/agent_search_screen.dart +++ b/lib/features/agents/presentation/screens/agent_search_screen.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:go_router/go_router.dart'; +import 'package:shimmer/shimmer.dart'; import 'package:real_estate_mobile/core/constants/app_colors.dart'; import 'package:real_estate_mobile/core/widgets/s3_image.dart'; import 'package:real_estate_mobile/features/agents/data/models/agent_profile.dart'; @@ -303,11 +304,31 @@ class _AgentSearchScreenState extends ConsumerState { ); } + Widget _buildShimmerList() { + return Shimmer.fromColors( + baseColor: const Color(0xFFE8E8E8), + highlightColor: const Color(0xFFF5F5F5), + child: ListView.builder( + padding: const EdgeInsets.symmetric(horizontal: 24), + physics: const NeverScrollableScrollPhysics(), + itemCount: 3, + itemBuilder: (_, __) => Padding( + padding: const EdgeInsets.only(bottom: 16), + child: Container( + height: 300, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(15), + ), + ), + ), + ), + ); + } + Widget _buildAgentList(SearchAgentsState state) { if (state.isLoading) { - return const Center( - child: CircularProgressIndicator(color: AppColors.accentOrange), - ); + return _buildShimmerList(); } if (state.error != null) { diff --git a/lib/features/notifications/presentation/screens/notifications_screen.dart b/lib/features/notifications/presentation/screens/notifications_screen.dart index b759460..5bf342b 100644 --- a/lib/features/notifications/presentation/screens/notifications_screen.dart +++ b/lib/features/notifications/presentation/screens/notifications_screen.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:go_router/go_router.dart'; +import 'package:shimmer/shimmer.dart'; import 'package:real_estate_mobile/core/constants/app_colors.dart'; import 'package:real_estate_mobile/features/notifications/data/models/notification_model.dart'; import 'package:real_estate_mobile/features/notifications/presentation/providers/notification_provider.dart'; @@ -159,10 +160,29 @@ class _NotificationsScreenState extends ConsumerState { Widget _buildContent(NotificationListState state) { if (state.isLoading) { - return const Center( - child: CircularProgressIndicator( - color: AppColors.accentOrange, - strokeWidth: 2, + return Shimmer.fromColors( + baseColor: const Color(0xFFE8E8E8), + highlightColor: const Color(0xFFF5F5F5), + child: ListView.builder( + padding: EdgeInsets.zero, + physics: const NeverScrollableScrollPhysics(), + itemCount: 6, + itemBuilder: (_, __) => Padding( + padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14), + child: Row( + children: [ + Container(width: 52, height: 52, decoration: const BoxDecoration(shape: BoxShape.circle, color: Colors.white)), + const SizedBox(width: 8), + Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ + Container(height: 14, width: 150, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(4))), + const SizedBox(height: 8), + Container(height: 12, width: double.infinity, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(4))), + ])), + const SizedBox(width: 8), + Container(height: 12, width: 50, decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(4))), + ], + ), + ), ), ); }