From 65cee90f72389d573969ed1db2eec89e84cc54a9 Mon Sep 17 00:00:00 2001
From: Renan Lukas <14964993+RenanLukas@users.noreply.github.com>
Date: Fri, 12 Apr 2024 20:35:51 -0300
Subject: [PATCH 1/9] Implement HorizontalPostListItemLoading

---
 .../HorizontalPostListItemLoading.kt          | 119 ++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
new file mode 100644
index 000000000000..1d7875a4cd12
--- /dev/null
+++ b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
@@ -0,0 +1,119 @@
+package org.wordpress.android.ui.reader.views.compose.horizontalpostlist
+
+import android.content.res.Configuration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.CornerSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.wordpress.android.ui.compose.theme.AppColor
+import org.wordpress.android.ui.compose.theme.AppTheme
+import org.wordpress.android.ui.compose.unit.Margin
+
+@Composable
+fun HorizontalPostListItemLoading() {
+    val loadingColor = AppColor.Black.copy(
+        alpha = 0.08F
+    )
+    Column(
+        modifier = Modifier
+            .width(240.dp)
+            .height(340.dp)
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Box(
+                modifier = Modifier
+                    .size(20.dp)
+                    .aspectRatio(1f)
+                    .background(loadingColor, shape = CircleShape),
+            )
+            Box(
+                modifier = Modifier
+                    .padding(start = Margin.Small.value)
+                    .width(99.dp)
+                    .height(8.dp)
+                    .clip(shape = RoundedCornerShape(16.dp))
+                    .background(loadingColor),
+            )
+        }
+        Box(
+            modifier = Modifier
+                .padding(top = Margin.Large.value)
+                .width(204.dp)
+                .height(18.dp)
+                .clip(shape = RoundedCornerShape(16.dp))
+                .background(loadingColor),
+        )
+        Box(
+            modifier = Modifier
+                .padding(top = Margin.Large.value)
+                .width(140.dp)
+                .height(18.dp)
+                .clip(shape = RoundedCornerShape(16.dp))
+                .background(loadingColor),
+        )
+        Box(
+            modifier = Modifier
+                .padding(top = Margin.Large.value)
+                .fillMaxWidth()
+                .height(150.dp)
+                .clip(shape = RoundedCornerShape(8.dp))
+                .background(loadingColor),
+        )
+        Box(
+            modifier = Modifier
+                .padding(
+                    start = Margin.Small.value,
+                    top = Margin.Large.value,
+                )
+                .width(170.dp)
+                .height(8.dp)
+                .clip(shape = RoundedCornerShape(16.dp))
+                .background(loadingColor),
+        )
+        Box(
+            modifier = Modifier
+                .padding(
+                    start = Margin.Small.value,
+                    top = Margin.Large.value,
+                )
+                .width(170.dp)
+                .height(8.dp)
+                .clip(shape = RoundedCornerShape(16.dp))
+                .background(loadingColor),
+        )
+    }
+}
+
+@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun HorizontalPostListItemLoadingPreview() {
+    AppTheme {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .fillMaxHeight()
+        ) {
+            HorizontalPostListItemLoading()
+        }
+    }
+}

From 1834b154dc7ba966ef552bee67e777819fbcf565 Mon Sep 17 00:00:00 2001
From: Renan Lukas <14964993+RenanLukas@users.noreply.github.com>
Date: Fri, 12 Apr 2024 21:10:24 -0300
Subject: [PATCH 2/9] Implement shimmer effect, update Compose preview

---
 .../ui/compose/components/shimmer/Shimmer.kt  | 85 +++++++++++++++++++
 .../compose/components/shimmer/ShimmerBox.kt  | 26 ++++++
 .../HorizontalPostListItemLoading.kt          | 45 +++++++---
 3 files changed, 146 insertions(+), 10 deletions(-)
 create mode 100644 WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
 create mode 100644 WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
new file mode 100644
index 000000000000..ab7bb410c9ca
--- /dev/null
+++ b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
@@ -0,0 +1,85 @@
+package org.wordpress.android.ui.compose.components.shimmer
+
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import org.wordpress.android.ui.compose.theme.AppColor
+
+/**
+ * Taken from https://github.com/canerkaseler/jetpack-compose-shimmer-loading-animation
+ */
+internal fun Modifier.shimmerLoadingAnimation(
+    isLoadingCompleted: Boolean = true,
+    isLightModeActive: Boolean = true,
+    widthOfShadowBrush: Int = 500,
+    angleOfAxisY: Float = 270f,
+    durationMillis: Int = 1000,
+): Modifier {
+    if (isLoadingCompleted) {
+        return this
+    } else {
+        return composed {
+            val shimmerColors = ShimmerAnimationData(isLightMode = isLightModeActive).getColours()
+
+            val transition = rememberInfiniteTransition(label = "")
+
+            val translateAnimation = transition.animateFloat(
+                initialValue = 0f,
+                targetValue = (durationMillis + widthOfShadowBrush).toFloat(),
+                animationSpec = infiniteRepeatable(
+                    animation = tween(
+                        durationMillis = durationMillis,
+                        easing = LinearEasing,
+                    ),
+                    repeatMode = RepeatMode.Restart,
+                ),
+                label = "Shimmer loading animation",
+            )
+
+            this.background(
+                brush = Brush.linearGradient(
+                    colors = shimmerColors,
+                    start = Offset(x = translateAnimation.value - widthOfShadowBrush, y = 0.0f),
+                    end = Offset(x = translateAnimation.value, y = angleOfAxisY),
+                ),
+            )
+        }
+    }
+}
+
+internal data class ShimmerAnimationData(
+    private val isLightMode: Boolean
+) {
+    fun getColours(): List<Color> {
+        return if (isLightMode) {
+            val color = AppColor.White
+
+            listOf(
+                color.copy(alpha = 0.3f),
+                color.copy(alpha = 0.5f),
+                color.copy(alpha = 1.0f),
+                color.copy(alpha = 0.5f),
+                color.copy(alpha = 0.3f),
+            )
+        } else {
+            val color = AppColor.Black
+
+            listOf(
+                color.copy(alpha = 0.0f),
+                color.copy(alpha = 0.3f),
+                color.copy(alpha = 0.5f),
+                color.copy(alpha = 0.3f),
+                color.copy(alpha = 0.0f),
+            )
+        }
+    }
+}
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt
new file mode 100644
index 000000000000..4602d885a1c6
--- /dev/null
+++ b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt
@@ -0,0 +1,26 @@
+package org.wordpress.android.ui.compose.components.shimmer
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+fun ShimmerBox(
+    modifier: Modifier = Modifier,
+    isLoadingCompleted: Boolean = true,
+    isLightModeActive: Boolean = true,
+    widthOfShadowBrush: Int = 500,
+    angleOfAxisY: Float = 270f,
+    durationMillis: Int = 1000,
+) {
+    Box(
+        modifier = modifier
+            .shimmerLoadingAnimation(
+                isLoadingCompleted = isLoadingCompleted,
+                isLightModeActive = isLightModeActive,
+                widthOfShadowBrush = widthOfShadowBrush,
+                angleOfAxisY = angleOfAxisY,
+                durationMillis = durationMillis,
+            )
+    )
+}
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
index 1d7875a4cd12..9bd3cb933836 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
@@ -4,7 +4,9 @@ import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -12,8 +14,8 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -21,6 +23,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import org.wordpress.android.ui.compose.components.shimmer.ShimmerBox
 import org.wordpress.android.ui.compose.theme.AppColor
 import org.wordpress.android.ui.compose.theme.AppTheme
 import org.wordpress.android.ui.compose.unit.Margin
@@ -33,52 +36,57 @@ fun HorizontalPostListItemLoading() {
     Column(
         modifier = Modifier
             .width(240.dp)
-            .height(340.dp)
+            .height(340.dp),
     ) {
         Row(
             modifier = Modifier.fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically,
         ) {
-            Box(
+            ShimmerBox(
                 modifier = Modifier
                     .size(20.dp)
                     .aspectRatio(1f)
                     .background(loadingColor, shape = CircleShape),
+                isLoadingCompleted = false,
             )
-            Box(
+            ShimmerBox(
                 modifier = Modifier
                     .padding(start = Margin.Small.value)
                     .width(99.dp)
                     .height(8.dp)
                     .clip(shape = RoundedCornerShape(16.dp))
                     .background(loadingColor),
+                isLoadingCompleted = false,
             )
         }
-        Box(
+        ShimmerBox(
             modifier = Modifier
                 .padding(top = Margin.Large.value)
                 .width(204.dp)
                 .height(18.dp)
                 .clip(shape = RoundedCornerShape(16.dp))
                 .background(loadingColor),
+            isLoadingCompleted = false,
         )
-        Box(
+        ShimmerBox(
             modifier = Modifier
                 .padding(top = Margin.Large.value)
                 .width(140.dp)
                 .height(18.dp)
                 .clip(shape = RoundedCornerShape(16.dp))
                 .background(loadingColor),
+            isLoadingCompleted = false,
         )
-        Box(
+        ShimmerBox(
             modifier = Modifier
                 .padding(top = Margin.Large.value)
                 .fillMaxWidth()
                 .height(150.dp)
                 .clip(shape = RoundedCornerShape(8.dp))
                 .background(loadingColor),
+            isLoadingCompleted = false,
         )
-        Box(
+        ShimmerBox(
             modifier = Modifier
                 .padding(
                     start = Margin.Small.value,
@@ -88,8 +96,9 @@ fun HorizontalPostListItemLoading() {
                 .height(8.dp)
                 .clip(shape = RoundedCornerShape(16.dp))
                 .background(loadingColor),
+            isLoadingCompleted = false,
         )
-        Box(
+        ShimmerBox(
             modifier = Modifier
                 .padding(
                     start = Margin.Small.value,
@@ -99,6 +108,7 @@ fun HorizontalPostListItemLoading() {
                 .height(8.dp)
                 .clip(shape = RoundedCornerShape(16.dp))
                 .background(loadingColor),
+            isLoadingCompleted = false,
         )
     }
 }
@@ -113,7 +123,22 @@ fun HorizontalPostListItemLoadingPreview() {
                 .fillMaxWidth()
                 .fillMaxHeight()
         ) {
-            HorizontalPostListItemLoading()
+            LazyRow(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 16.dp, bottom = 16.dp),
+                contentPadding = PaddingValues(horizontal = 12.dp),
+            ) {
+                item {
+                    HorizontalPostListItemLoading()
+                    Spacer(Modifier.width(12.dp))
+                    HorizontalPostListItemLoading()
+                    Spacer(Modifier.width(12.dp))
+                    HorizontalPostListItemLoading()
+                    Spacer(Modifier.width(12.dp))
+                    HorizontalPostListItemLoading()
+                }
+            }
         }
     }
 }

From b970e1dd1eee9584a374e63ea9853f28c9bf182a Mon Sep 17 00:00:00 2001
From: Renan Lukas <14964993+RenanLukas@users.noreply.github.com>
Date: Mon, 15 Apr 2024 14:23:44 -0300
Subject: [PATCH 3/9] Remove blog avatar from loading

---
 .../horizontalpostlist/HorizontalPostListItemLoading.kt    | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
index 9bd3cb933836..cb3f5677d2ac 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
@@ -42,13 +42,6 @@ fun HorizontalPostListItemLoading() {
             modifier = Modifier.fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically,
         ) {
-            ShimmerBox(
-                modifier = Modifier
-                    .size(20.dp)
-                    .aspectRatio(1f)
-                    .background(loadingColor, shape = CircleShape),
-                isLoadingCompleted = false,
-            )
             ShimmerBox(
                 modifier = Modifier
                     .padding(start = Margin.Small.value)

From 907d5df3603ea1dc087591d1f9bff11d25fe2b51 Mon Sep 17 00:00:00 2001
From: Renan Lukas <14964993+RenanLukas@users.noreply.github.com>
Date: Mon, 15 Apr 2024 19:10:14 -0300
Subject: [PATCH 4/9] Fix detekt, remove extra padding

---
 .../horizontalpostlist/HorizontalPostListItemLoading.kt       | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
index cb3f5677d2ac..f4da915ae614 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
@@ -7,15 +7,12 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyRow
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -44,7 +41,6 @@ fun HorizontalPostListItemLoading() {
         ) {
             ShimmerBox(
                 modifier = Modifier
-                    .padding(start = Margin.Small.value)
                     .width(99.dp)
                     .height(8.dp)
                     .clip(shape = RoundedCornerShape(16.dp))

From 212400e55d30b522b0fff74b43e5b8917c866cb0 Mon Sep 17 00:00:00 2001
From: Renan Lukas <14964993+RenanLukas@users.noreply.github.com>
Date: Tue, 16 Apr 2024 18:12:02 -0300
Subject: [PATCH 5/9] Move shimmer color to generic component

---
 .../ui/compose/components/shimmer/Shimmer.kt  |  6 ++++++
 .../compose/components/shimmer/ShimmerBox.kt  |  2 ++
 .../HorizontalPostListItemLoading.kt          | 21 ++++++-------------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
index ab7bb410c9ca..7782a19ede72 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
@@ -14,6 +14,12 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import org.wordpress.android.ui.compose.theme.AppColor
 
+object Shimmer {
+    val color = AppColor.Black.copy(
+        alpha = 0.08F
+    )
+}
+
 /**
  * Taken from https://github.com/canerkaseler/jetpack-compose-shimmer-loading-animation
  */
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt
index 4602d885a1c6..20f9c174331e 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt
@@ -1,5 +1,6 @@
 package org.wordpress.android.ui.compose.components.shimmer
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -15,6 +16,7 @@ fun ShimmerBox(
 ) {
     Box(
         modifier = modifier
+            .background(Shimmer.color)
             .shimmerLoadingAnimation(
                 isLoadingCompleted = isLoadingCompleted,
                 isLightModeActive = isLightModeActive,
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
index f4da915ae614..c236b8ead01a 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
@@ -27,9 +27,6 @@ import org.wordpress.android.ui.compose.unit.Margin
 
 @Composable
 fun HorizontalPostListItemLoading() {
-    val loadingColor = AppColor.Black.copy(
-        alpha = 0.08F
-    )
     Column(
         modifier = Modifier
             .width(240.dp)
@@ -43,8 +40,7 @@ fun HorizontalPostListItemLoading() {
                 modifier = Modifier
                     .width(99.dp)
                     .height(8.dp)
-                    .clip(shape = RoundedCornerShape(16.dp))
-                    .background(loadingColor),
+                    .clip(shape = RoundedCornerShape(16.dp)),
                 isLoadingCompleted = false,
             )
         }
@@ -53,8 +49,7 @@ fun HorizontalPostListItemLoading() {
                 .padding(top = Margin.Large.value)
                 .width(204.dp)
                 .height(18.dp)
-                .clip(shape = RoundedCornerShape(16.dp))
-                .background(loadingColor),
+                .clip(shape = RoundedCornerShape(16.dp)),
             isLoadingCompleted = false,
         )
         ShimmerBox(
@@ -62,8 +57,7 @@ fun HorizontalPostListItemLoading() {
                 .padding(top = Margin.Large.value)
                 .width(140.dp)
                 .height(18.dp)
-                .clip(shape = RoundedCornerShape(16.dp))
-                .background(loadingColor),
+                .clip(shape = RoundedCornerShape(16.dp)),
             isLoadingCompleted = false,
         )
         ShimmerBox(
@@ -71,8 +65,7 @@ fun HorizontalPostListItemLoading() {
                 .padding(top = Margin.Large.value)
                 .fillMaxWidth()
                 .height(150.dp)
-                .clip(shape = RoundedCornerShape(8.dp))
-                .background(loadingColor),
+                .clip(shape = RoundedCornerShape(8.dp)),
             isLoadingCompleted = false,
         )
         ShimmerBox(
@@ -83,8 +76,7 @@ fun HorizontalPostListItemLoading() {
                 )
                 .width(170.dp)
                 .height(8.dp)
-                .clip(shape = RoundedCornerShape(16.dp))
-                .background(loadingColor),
+                .clip(shape = RoundedCornerShape(16.dp)),
             isLoadingCompleted = false,
         )
         ShimmerBox(
@@ -95,8 +87,7 @@ fun HorizontalPostListItemLoading() {
                 )
                 .width(170.dp)
                 .height(8.dp)
-                .clip(shape = RoundedCornerShape(16.dp))
-                .background(loadingColor),
+                .clip(shape = RoundedCornerShape(16.dp)),
             isLoadingCompleted = false,
         )
     }

From 4a8a19a14fa661d76a2e637c28e38442bf39ae5f Mon Sep 17 00:00:00 2001
From: Renan Lukas <14964993+RenanLukas@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:52:13 -0300
Subject: [PATCH 6/9] Change shimmer implementation

---
 .../ui/compose/components/shimmer/Shimmer.kt  | 96 ++++++-------------
 .../compose/components/shimmer/ShimmerBox.kt  | 13 +--
 .../HorizontalPostListItemLoading.kt          |  6 --
 3 files changed, 32 insertions(+), 83 deletions(-)

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
index 7782a19ede72..d0ab8e9ef3b2 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
@@ -7,11 +7,17 @@ import androidx.compose.animation.core.infiniteRepeatable
 import androidx.compose.animation.core.rememberInfiniteTransition
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.unit.IntSize
 import org.wordpress.android.ui.compose.theme.AppColor
 
 object Shimmer {
@@ -20,72 +26,32 @@ object Shimmer {
     )
 }
 
-/**
- * Taken from https://github.com/canerkaseler/jetpack-compose-shimmer-loading-animation
- */
-internal fun Modifier.shimmerLoadingAnimation(
-    isLoadingCompleted: Boolean = true,
-    isLightModeActive: Boolean = true,
-    widthOfShadowBrush: Int = 500,
-    angleOfAxisY: Float = 270f,
-    durationMillis: Int = 1000,
-): Modifier {
-    if (isLoadingCompleted) {
-        return this
-    } else {
-        return composed {
-            val shimmerColors = ShimmerAnimationData(isLightMode = isLightModeActive).getColours()
-
-            val transition = rememberInfiniteTransition(label = "")
-
-            val translateAnimation = transition.animateFloat(
-                initialValue = 0f,
-                targetValue = (durationMillis + widthOfShadowBrush).toFloat(),
-                animationSpec = infiniteRepeatable(
-                    animation = tween(
-                        durationMillis = durationMillis,
-                        easing = LinearEasing,
-                    ),
-                    repeatMode = RepeatMode.Restart,
-                ),
-                label = "Shimmer loading animation",
-            )
-
-            this.background(
-                brush = Brush.linearGradient(
-                    colors = shimmerColors,
-                    start = Offset(x = translateAnimation.value - widthOfShadowBrush, y = 0.0f),
-                    end = Offset(x = translateAnimation.value, y = angleOfAxisY),
-                ),
-            )
-        }
+fun Modifier.shimmerLoadingAnimation(): Modifier = composed {
+    var size by remember {
+        mutableStateOf(IntSize.Zero)
     }
-}
-
-internal data class ShimmerAnimationData(
-    private val isLightMode: Boolean
-) {
-    fun getColours(): List<Color> {
-        return if (isLightMode) {
-            val color = AppColor.White
-
-            listOf(
-                color.copy(alpha = 0.3f),
-                color.copy(alpha = 0.5f),
-                color.copy(alpha = 1.0f),
-                color.copy(alpha = 0.5f),
-                color.copy(alpha = 0.3f),
-            )
-        } else {
-            val color = AppColor.Black
+    val transition = rememberInfiniteTransition()
+    val startOffsetX by transition.animateFloat(
+        initialValue = -2 * size.width.toFloat(),
+        targetValue = 2 * size.width.toFloat(),
+        animationSpec = infiniteRepeatable(
+            animation = tween(1000)
+        ),
+        label = "Shimmer animation",
+    )
 
-            listOf(
-                color.copy(alpha = 0.0f),
-                color.copy(alpha = 0.3f),
-                color.copy(alpha = 0.5f),
-                color.copy(alpha = 0.3f),
-                color.copy(alpha = 0.0f),
-            )
+    background(
+        brush = Brush.linearGradient(
+            colors = listOf(
+                Color(0xFFB8B5B5),
+                Color(0xFF8F8B8B),
+                Color(0xFFB8B5B5),
+            ),
+            start = Offset(startOffsetX, 0f),
+            end = Offset(startOffsetX + size.width.toFloat(), size.height.toFloat())
+        )
+    )
+        .onGloballyPositioned {
+            size = it.size
         }
-    }
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt
index 20f9c174331e..713ed3a92498 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt
@@ -8,21 +8,10 @@ import androidx.compose.ui.Modifier
 @Composable
 fun ShimmerBox(
     modifier: Modifier = Modifier,
-    isLoadingCompleted: Boolean = true,
-    isLightModeActive: Boolean = true,
-    widthOfShadowBrush: Int = 500,
-    angleOfAxisY: Float = 270f,
-    durationMillis: Int = 1000,
 ) {
     Box(
         modifier = modifier
             .background(Shimmer.color)
-            .shimmerLoadingAnimation(
-                isLoadingCompleted = isLoadingCompleted,
-                isLightModeActive = isLightModeActive,
-                widthOfShadowBrush = widthOfShadowBrush,
-                angleOfAxisY = angleOfAxisY,
-                durationMillis = durationMillis,
-            )
+            .shimmerLoadingAnimation()
     )
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
index c236b8ead01a..b2903eb9b866 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
@@ -41,7 +41,6 @@ fun HorizontalPostListItemLoading() {
                     .width(99.dp)
                     .height(8.dp)
                     .clip(shape = RoundedCornerShape(16.dp)),
-                isLoadingCompleted = false,
             )
         }
         ShimmerBox(
@@ -50,7 +49,6 @@ fun HorizontalPostListItemLoading() {
                 .width(204.dp)
                 .height(18.dp)
                 .clip(shape = RoundedCornerShape(16.dp)),
-            isLoadingCompleted = false,
         )
         ShimmerBox(
             modifier = Modifier
@@ -58,7 +56,6 @@ fun HorizontalPostListItemLoading() {
                 .width(140.dp)
                 .height(18.dp)
                 .clip(shape = RoundedCornerShape(16.dp)),
-            isLoadingCompleted = false,
         )
         ShimmerBox(
             modifier = Modifier
@@ -66,7 +63,6 @@ fun HorizontalPostListItemLoading() {
                 .fillMaxWidth()
                 .height(150.dp)
                 .clip(shape = RoundedCornerShape(8.dp)),
-            isLoadingCompleted = false,
         )
         ShimmerBox(
             modifier = Modifier
@@ -77,7 +73,6 @@ fun HorizontalPostListItemLoading() {
                 .width(170.dp)
                 .height(8.dp)
                 .clip(shape = RoundedCornerShape(16.dp)),
-            isLoadingCompleted = false,
         )
         ShimmerBox(
             modifier = Modifier
@@ -88,7 +83,6 @@ fun HorizontalPostListItemLoading() {
                 .width(170.dp)
                 .height(8.dp)
                 .clip(shape = RoundedCornerShape(16.dp)),
-            isLoadingCompleted = false,
         )
     }
 }

From 429fcbfba496591bd47130b5ee5e3a969a7108e3 Mon Sep 17 00:00:00 2001
From: Renan Lukas <14964993+RenanLukas@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:58:25 -0300
Subject: [PATCH 7/9] Fix detekt

---
 .../wordpress/android/ui/compose/components/shimmer/Shimmer.kt | 3 +--
 .../horizontalpostlist/HorizontalPostListItemLoading.kt        | 2 --
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
index d0ab8e9ef3b2..9bb0065be7ec 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
@@ -1,7 +1,5 @@
 package org.wordpress.android.ui.compose.components.shimmer
 
-import androidx.compose.animation.core.LinearEasing
-import androidx.compose.animation.core.RepeatMode
 import androidx.compose.animation.core.animateFloat
 import androidx.compose.animation.core.infiniteRepeatable
 import androidx.compose.animation.core.rememberInfiniteTransition
@@ -26,6 +24,7 @@ object Shimmer {
     )
 }
 
+@Suppress("MagicNumber")
 fun Modifier.shimmerLoadingAnimation(): Modifier = composed {
     var size by remember {
         mutableStateOf(IntSize.Zero)
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
index b2903eb9b866..4f33ed8568a7 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
@@ -1,7 +1,6 @@
 package org.wordpress.android.ui.reader.views.compose.horizontalpostlist
 
 import android.content.res.Configuration
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -21,7 +20,6 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import org.wordpress.android.ui.compose.components.shimmer.ShimmerBox
-import org.wordpress.android.ui.compose.theme.AppColor
 import org.wordpress.android.ui.compose.theme.AppTheme
 import org.wordpress.android.ui.compose.unit.Margin
 

From 3ae8b583b1ef2195c57412322e50b82012b5c76a Mon Sep 17 00:00:00 2001
From: Renan Lukas <14964993+RenanLukas@users.noreply.github.com>
Date: Thu, 18 Apr 2024 12:55:37 -0300
Subject: [PATCH 8/9] Remove shimmer effect

---
 .../ui/compose/components/shimmer/Shimmer.kt  | 56 -------------------
 .../compose/components/shimmer/ShimmerBox.kt  | 17 ------
 .../HorizontalPostListItemLoading.kt          | 36 +++++++-----
 3 files changed, 23 insertions(+), 86 deletions(-)
 delete mode 100644 WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
 delete mode 100644 WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
deleted file mode 100644
index 9bb0065be7ec..000000000000
--- a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/Shimmer.kt
+++ /dev/null
@@ -1,56 +0,0 @@
-package org.wordpress.android.ui.compose.components.shimmer
-
-import androidx.compose.animation.core.animateFloat
-import androidx.compose.animation.core.infiniteRepeatable
-import androidx.compose.animation.core.rememberInfiniteTransition
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.background
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.unit.IntSize
-import org.wordpress.android.ui.compose.theme.AppColor
-
-object Shimmer {
-    val color = AppColor.Black.copy(
-        alpha = 0.08F
-    )
-}
-
-@Suppress("MagicNumber")
-fun Modifier.shimmerLoadingAnimation(): Modifier = composed {
-    var size by remember {
-        mutableStateOf(IntSize.Zero)
-    }
-    val transition = rememberInfiniteTransition()
-    val startOffsetX by transition.animateFloat(
-        initialValue = -2 * size.width.toFloat(),
-        targetValue = 2 * size.width.toFloat(),
-        animationSpec = infiniteRepeatable(
-            animation = tween(1000)
-        ),
-        label = "Shimmer animation",
-    )
-
-    background(
-        brush = Brush.linearGradient(
-            colors = listOf(
-                Color(0xFFB8B5B5),
-                Color(0xFF8F8B8B),
-                Color(0xFFB8B5B5),
-            ),
-            start = Offset(startOffsetX, 0f),
-            end = Offset(startOffsetX + size.width.toFloat(), size.height.toFloat())
-        )
-    )
-        .onGloballyPositioned {
-            size = it.size
-        }
-}
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt b/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt
deleted file mode 100644
index 713ed3a92498..000000000000
--- a/WordPress/src/main/java/org/wordpress/android/ui/compose/components/shimmer/ShimmerBox.kt
+++ /dev/null
@@ -1,17 +0,0 @@
-package org.wordpress.android.ui.compose.components.shimmer
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-
-@Composable
-fun ShimmerBox(
-    modifier: Modifier = Modifier,
-) {
-    Box(
-        modifier = modifier
-            .background(Shimmer.color)
-            .shimmerLoadingAnimation()
-    )
-}
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
index 4f33ed8568a7..08ab7386d2d7 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
@@ -1,6 +1,7 @@
 package org.wordpress.android.ui.reader.views.compose.horizontalpostlist
 
 import android.content.res.Configuration
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -17,14 +18,17 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import org.wordpress.android.ui.compose.components.shimmer.ShimmerBox
+import org.wordpress.android.R
+import org.wordpress.android.ui.compose.theme.AppColor
 import org.wordpress.android.ui.compose.theme.AppTheme
 import org.wordpress.android.ui.compose.unit.Margin
 
 @Composable
 fun HorizontalPostListItemLoading() {
+    val backgroundColor = AppColor.Black.copy(alpha = 0.08F)
     Column(
         modifier = Modifier
             .width(240.dp)
@@ -34,35 +38,39 @@ fun HorizontalPostListItemLoading() {
             modifier = Modifier.fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically,
         ) {
-            ShimmerBox(
+            Box(
                 modifier = Modifier
                     .width(99.dp)
                     .height(8.dp)
-                    .clip(shape = RoundedCornerShape(16.dp)),
+                    .clip(shape = RoundedCornerShape(16.dp))
+                    .background(backgroundColor),
             )
         }
-        ShimmerBox(
+        Box(
             modifier = Modifier
                 .padding(top = Margin.Large.value)
                 .width(204.dp)
                 .height(18.dp)
-                .clip(shape = RoundedCornerShape(16.dp)),
+                .clip(shape = RoundedCornerShape(16.dp))
+                .background(backgroundColor),
         )
-        ShimmerBox(
+        Box(
             modifier = Modifier
                 .padding(top = Margin.Large.value)
                 .width(140.dp)
                 .height(18.dp)
-                .clip(shape = RoundedCornerShape(16.dp)),
+                .clip(shape = RoundedCornerShape(16.dp))
+                .background(backgroundColor),
         )
-        ShimmerBox(
+        Box(
             modifier = Modifier
                 .padding(top = Margin.Large.value)
                 .fillMaxWidth()
                 .height(150.dp)
-                .clip(shape = RoundedCornerShape(8.dp)),
+                .clip(shape = RoundedCornerShape(8.dp))
+                .background(backgroundColor),
         )
-        ShimmerBox(
+        Box(
             modifier = Modifier
                 .padding(
                     start = Margin.Small.value,
@@ -70,9 +78,10 @@ fun HorizontalPostListItemLoading() {
                 )
                 .width(170.dp)
                 .height(8.dp)
-                .clip(shape = RoundedCornerShape(16.dp)),
+                .clip(shape = RoundedCornerShape(16.dp))
+                .background(backgroundColor),
         )
-        ShimmerBox(
+        Box(
             modifier = Modifier
                 .padding(
                     start = Margin.Small.value,
@@ -80,7 +89,8 @@ fun HorizontalPostListItemLoading() {
                 )
                 .width(170.dp)
                 .height(8.dp)
-                .clip(shape = RoundedCornerShape(16.dp)),
+                .clip(shape = RoundedCornerShape(16.dp))
+                .background(backgroundColor),
         )
     }
 }

From c54757cf50efd3319a4e7fdff8bb436dbe283e77 Mon Sep 17 00:00:00 2001
From: Renan Lukas <14964993+RenanLukas@users.noreply.github.com>
Date: Thu, 18 Apr 2024 18:00:55 -0300
Subject: [PATCH 9/9] Fix detekt

---
 .../compose/horizontalpostlist/HorizontalPostListItemLoading.kt | 2 --
 1 file changed, 2 deletions(-)

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
index 08ab7386d2d7..9318c577756a 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
+++ b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItemLoading.kt
@@ -18,10 +18,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import org.wordpress.android.R
 import org.wordpress.android.ui.compose.theme.AppColor
 import org.wordpress.android.ui.compose.theme.AppTheme
 import org.wordpress.android.ui.compose.unit.Margin