Bug 1845255 - Add loading UI for review quality check

app/build.gradle

@@ -588,6 +588,7 @@ dependencies {
     implementation ComponentsDependencies.androidx_annotation
     implementation ComponentsDependencies.androidx_compose_ui
     implementation ComponentsDependencies.androidx_compose_ui_tooling_preview
+    implementation ComponentsDependencies.androidx_compose_animation
     implementation ComponentsDependencies.androidx_compose_foundation
     implementation ComponentsDependencies.androidx_compose_material
     implementation FenixDependencies.androidx_legacy

app/src/main/java/org/mozilla/fenix/shopping/ui/ProductReviewLoading.kt

@@ -0,0 +1,95 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+package org.mozilla.fenix.shopping.ui
+
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.StartOffset
+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.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.mozilla.fenix.compose.annotation.LightDarkPreview
+import org.mozilla.fenix.theme.FirefoxTheme
+
+private const val ANIMATION_DURATION_MS = 1000
+private const val INITIAL_ALPHA = 0.25f
+private const val TARGET_ALPHA = 1f
+private val boxes = listOf(
+    BoxInfo(height = 80.dp, offsetMillis = 500),
+    BoxInfo(height = 80.dp, offsetMillis = 1000),
+    BoxInfo(height = 192.dp, offsetMillis = 0),
+    BoxInfo(height = 40.dp, offsetMillis = 500),
+    BoxInfo(height = 192.dp, offsetMillis = 1000),
+)
+
+/**
+ * Loading UI for review quality check content.
+ */
+@Composable
+fun ProductReviewLoading(
+    modifier: Modifier = Modifier,
+) {
+    val infiniteTransition = rememberInfiniteTransition("ProductReviewLoading")
+
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        boxes.forEach { boxInfo ->
+            val alpha by infiniteTransition.animateFloat(
+                initialValue = INITIAL_ALPHA,
+                targetValue = TARGET_ALPHA,
+                animationSpec = infiniteRepeatable(
+                    animation = tween(ANIMATION_DURATION_MS, easing = LinearEasing),
+                    repeatMode = RepeatMode.Reverse,
+                    initialStartOffset = StartOffset(offsetMillis = boxInfo.offsetMillis),
+                ),
+                label = "ProductReviewLoading-Alpha",
+            )
+
+            Box(
+                modifier = Modifier
+                    .height(boxInfo.height)
+                    .fillMaxWidth()
+                    .alpha(alpha)
+                    .background(
+                        color = FirefoxTheme.colors.layer3,
+                        shape = RoundedCornerShape(8.dp),
+                    ),
+            )
+        }
+    }
+}
+
+private data class BoxInfo(
+    val height: Dp,
+    val offsetMillis: Int,
+)
+
+@LightDarkPreview
+@Composable
+private fun ProductReviewLoadingPreview() {
+    FirefoxTheme {
+        ReviewQualityCheckScaffold(
+            onRequestDismiss = {},
+        ) {
+            ProductReviewLoading()
+        }
+    }
+}

app/src/main/java/org/mozilla/fenix/shopping/ui/ReviewQualityCheckBottomSheet.kt

@@ -4,6 +4,7 @@
 
 package org.mozilla.fenix.shopping.ui
 
+import androidx.compose.animation.Crossfade
 import androidx.compose.animation.animateContentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -67,26 +68,31 @@ private fun ProductReview(
     onOptOutClick: () -> Unit,
     onProductRecommendationsEnabledStateChange: (Boolean) -> Unit,
 ) {
-    when (val productReviewState = state.productReviewState) {
-        is AnalysisPresent -> {
-            ProductAnalysis(
-                productRecommendationsEnabled = state.productRecommendationsPreference,
-                productAnalysis = productReviewState,
-                onOptOutClick = onOptOutClick,
-                onProductRecommendationsEnabledStateChange = onProductRecommendationsEnabledStateChange,
-            )
-        }
+    Crossfade(
+        targetState = state.productReviewState,
+        label = "ProductReview-Crossfade",
+    ) { productReviewState ->
+        when (productReviewState) {
+            is AnalysisPresent -> {
+                ProductAnalysis(
+                    productRecommendationsEnabled = state.productRecommendationsPreference,
+                    productAnalysis = productReviewState,
+                    onOptOutClick = onOptOutClick,
+                    onProductRecommendationsEnabledStateChange = onProductRecommendationsEnabledStateChange,
+                )
+            }
 
-        is ReviewQualityCheckState.OptedIn.ProductReviewState.Error -> {
-            // Bug 1840113
-        }
+            is ReviewQualityCheckState.OptedIn.ProductReviewState.Error -> {
+                // Bug 1840113
+            }
 
-        is ReviewQualityCheckState.OptedIn.ProductReviewState.Loading -> {
-            // Bug 1845255
-        }
+            is ReviewQualityCheckState.OptedIn.ProductReviewState.Loading -> {
+                ProductReviewLoading()
+            }
 
-        is ReviewQualityCheckState.OptedIn.ProductReviewState.NoAnalysisPresent -> {
-            // Bug 1840333
+            is ReviewQualityCheckState.OptedIn.ProductReviewState.NoAnalysisPresent -> {
+                // Bug 1840333
+            }
         }
     }
 }