From 457ea8a0822a3beb48452ca036227562a921080e Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Tue, 31 Mar 2026 06:18:33 +0530
Subject: [PATCH] feat: add shimmer header to conversations screen and update
 navigation transitions

---
 .../screens/conversations_screen.dart         | 40 ++++++++++++++++++-
 lib/routing/app_router.dart                   | 14 +++----
 2 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/lib/features/messaging/presentation/screens/conversations_screen.dart b/lib/features/messaging/presentation/screens/conversations_screen.dart
index 518192f..96dd038 100644
--- a/lib/features/messaging/presentation/screens/conversations_screen.dart
+++ b/lib/features/messaging/presentation/screens/conversations_screen.dart
@@ -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(
diff --git a/lib/routing/app_router.dart b/lib/routing/app_router.dart
index b8e33c8..91be979 100644
--- a/lib/routing/app_router.dart
+++ b/lib/routing/app_router.dart
@@ -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,
   );
 }