Feat: Implement Shimmer while user details are being loaded

Feat: Implement Shimmer while user details are being loaded Feat: Implement Shimmer while user details are being loaded Feat: Implement Shimmer while user details are being loaded Feat: Implement Shimmer while user details are being loaded
openMF · Nov 20, 2023 · 21512da · 21512da
1 parent ecbf4b6
commit 21512da
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 5 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -203,5 +203,9 @@ dependencies {
     debugImplementation "androidx.compose.ui:ui-tooling:$rootProject.composeVersion"
     implementation "androidx.compose.material3:material3:$rootProject.materialVersion"
     implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$rootProject.lifecycleVersion"
+
+    // Shimmer effect
+    implementation "com.facebook.shimmer:shimmer:$rootProject.shimmerVersion"
+
 }
 apply plugin: 'com.google.gms.google-services'
diff --git a/app/src/main/java/org/mifos/mobile/ui/fragments/HomeOldFragment.kt b/app/src/main/java/org/mifos/mobile/ui/fragments/HomeOldFragment.kt
@@ -256,9 +256,11 @@ class HomeOldFragment : BaseFragment(), OnRefreshListener {
         lifecycleScope.launchWhenStarted {
             viewModel.homeUiState.collect {
                 when (it) {
-                    is HomeUiState.Loading -> showProgress()
+                    is HomeUiState.Loading ->{
+                        binding.detailsOfCustomer.visibility = View.INVISIBLE
+                    }
                     is HomeUiState.UserImage -> {
-                        hideProgress()
+                        stopShimmerEffect()
                         showUserImage(it.image)
                     }
                     is HomeUiState.ClientAccountDetails -> {
@@ -271,7 +273,7 @@ class HomeOldFragment : BaseFragment(), OnRefreshListener {
                         showError(getString(it.errorMessage))
                     }
                     is HomeUiState.UserDetails -> {
-                        hideProgress()
+                       stopShimmerEffect()
                         showUserDetails(it.client)
                     }
                     is HomeUiState.UnreadNotificationsCount -> {
@@ -360,6 +362,12 @@ class HomeOldFragment : BaseFragment(), OnRefreshListener {
     private fun userImageClicked() {
         startActivity(Intent(activity, UserProfileActivity::class.java))
     }
+
+    private fun stopShimmerEffect(){
+        binding.shimmerViewContainer.stopShimmer()
+        binding.detailsOfCustomer.visibility = View.VISIBLE
+        binding.shimmerViewContainer.visibility = View.INVISIBLE
+    }
 
     /**
      * Calls `openAccount()` for opening [ClientAccountsFragment]

diff --git a/app/src/main/res/layout/fragment_home_old.xml b/app/src/main/res/layout/fragment_home_old.xml
@@ -17,7 +17,17 @@
             android:layout_marginHorizontal="@dimen/Mifos.DesignSystem.Spacing.screenHorizontalMargin"
             android:animateLayoutChanges="true"
             android:orientation="vertical">
-
+        <RelativeLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_marginHorizontal="@dimen/Mifos.DesignSystem.Spacing.screenHorizontalMargin"
+            android:animateLayoutChanges="true"
+            android:orientation="vertical">
+            <com.facebook.shimmer.ShimmerFrameLayout
+                android:id="@+id/shimmer_view_container"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center">
             <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
@@ -27,6 +37,38 @@
                 android:orientation="horizontal"
                 android:padding="@dimen/Mifos.DesignSystem.Spacing.CardInnerPaddingLarger">
 
+                <com.google.android.material.imageview.ShapeableImageView
+                    android:layout_width="84dp"
+                    android:layout_height="84dp"
+                    android:layout_marginEnd="@dimen/Mifos.DesignSystem.Spacing.marginBetweenItemsLarge"
+                    app:border="true"
+                    app:border_width="1dp"
+                    tools:src="@drawable/ic_person_black_24dp"
+                    app:shapeAppearanceOverlay="@style/Circular"
+                    android:background="@color/gray_dark"
+                    />
+
+
+                <TextView
+                    style="@style/Mifos.DesignSystem.TextStyle.Heading"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:background="@color/gray_dark" />
+
+            </LinearLayout>
+            </com.facebook.shimmer.ShimmerFrameLayout>
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="@dimen/Mifos.DesignSystem.Spacing.marginBetweenItemsSmall"
+                android:clickable="true"
+                android:focusable="true"
+                android:orientation="horizontal"
+                android:padding="@dimen/Mifos.DesignSystem.Spacing.CardInnerPaddingLarger"
+                android:layout_gravity="center"
+                android:id="@+id/details_of_customer">
+
                 <com.google.android.material.imageview.ShapeableImageView
                     android:id="@+id/iv_circular_user_image"
                     android:layout_width="84dp"
@@ -46,7 +88,7 @@
                     tools:text="Hello, you guys" />
 
             </LinearLayout>
-
+        </RelativeLayout>
             <com.google.android.material.card.MaterialCardView
                 style="@style/Mifos.DesignSystem.Components.Cards.Filled"
                 android:layout_width="match_parent"

diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -5,4 +5,8 @@
     <style name="SplashTheme" parent="Mifos.DesignSystem.Theme.Base">
         <item name="android:windowBackground">@drawable/splash_background</item>
     </style>
+
+    <style name="Circular">
+        <item name="cornerSize">50%</item>
+    </style>
 </resources>
diff --git a/build.gradle b/build.gradle
@@ -95,4 +95,5 @@ ext {
     composeActivity = '1.7.2'
     materialVersion = '1.1.0'
     lifecycleVersion = '2.6.1'
+    shimmerVersion = '0.5.0'
 }