Re-Quest/mobile-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add shimmer header to conversations screen and update navigation transitions

Browse Source
This commit is contained in:
pradeepkumar
2026-03-31 06:18:33 +05:30
parent 597b97414d
commit 457ea8a082
2 changed files with 45 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
lib/features/messaging/presentation/screens/conversations_screen.dart
View File

@@ -51,9 +51,11 @@ class _ConversationsScreenState extends ConsumerState<ConversationsScreen> {
final state = ref.watch(messagingProvider);
final filtered = _filteredConversations(state.conversations);
final isLoading = state.isLoadingConversations && state.conversations.isEmpty;
return Column(
children: [
_buildHeader(),
isLoading ? _buildShimmerHeader() : _buildHeader(),
Expanded(child: _buildConversationList(state, filtered)),
],
);
@@ -248,6 +250,42 @@ class _ConversationsScreenState extends ConsumerState<ConversationsScreen> {
);
}
// -- Shimmer header placeholder --
Widget _buildShimmerHeader() {
return Shimmer.fromColors(
baseColor: const Color(0xFFE8E8E8),
highlightColor: const Color(0xFFF5F5F5),
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 12),
child: Row(
children: [
Container(
width: 16, height: 16,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
const SizedBox(width: 10),
Expanded(
child: Container(
height: 44,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(22),
),
),
),
const SizedBox(width: 8),
Container(width: 22, height: 22, color: Colors.white),
const SizedBox(width: 8),
Container(width: 22, height: 22, color: Colors.white),
],
),
),
);
}
// -- Shimmer Loading State --
Widget _buildShimmerLoading() {
return Shimmer.fromColors(

14
lib/routing/app_router.dart
View File

@@ -108,6 +108,8 @@ final routerProvider = Provider<GoRouter>((ref) {
pageBuilder: (context, state) => CustomTransitionPage(
key: state.pageKey,
child: const _HomeRouteWrapper(),
transitionDuration: const Duration(milliseconds: 200),
reverseTransitionDuration: const Duration(milliseconds: 150),
transitionsBuilder: _fadeTransition,
),
),
@@ -146,6 +148,8 @@ final routerProvider = Provider<GoRouter>((ref) {
pageBuilder: (context, state) => CustomTransitionPage(
key: state.pageKey,
child: const ConversationsScreen(),
transitionDuration: const Duration(milliseconds: 200),
reverseTransitionDuration: const Duration(milliseconds: 150),
transitionsBuilder: _fadeTransition,
),
),
@@ -276,14 +280,8 @@ Widget _fadeTransition(
Widget child,
) {
return FadeTransition(
opacity: CurveTween(curve: Curves.easeOut).animate(animation),
child: SlideTransition(
position: Tween<Offset>(
begin: const Offset(0.02, 0),
end: Offset.zero,
).animate(CurvedAnimation(parent: animation, curve: Curves.easeOut)),
child: child,
),
opacity: CurveTween(curve: Curves.easeInOut).animate(animation),
child: child,
);
}