Merge pull request Kaaveh#189 from hadi-norouzi/feature/market_detail…

…_skeleton Update market detail loading with skeleton animation
mhmd-android · Nov 13, 2023 · e18d16a · e18d16a
2 parents 7cb467d + 192fe72
commit e18d16a
Show file tree

Hide file tree

Showing 2 changed files with 129 additions and 2 deletions.
diff --git a/feature/marketdetail/src/main/java/ir/composenews/marketdetail/MarketDetailLoadingView.kt b/feature/marketdetail/src/main/java/ir/composenews/marketdetail/MarketDetailLoadingView.kt
@@ -0,0 +1,115 @@
+package ir.composenews.marketdetail
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+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.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Divider
+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.graphics.Color
+import androidx.compose.ui.unit.dp
+import ir.composenews.designsystem.component.QuadLineChart
+import ir.composenews.designsystem.component.shimmerEffect
+
+@Composable
+fun MarketDetailLoadingView() {
+    Box(modifier = Modifier.fillMaxSize()) {
+        Column(
+            modifier = Modifier.fillMaxSize(),
+        ) {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+            ) {
+                Row(
+                    modifier = Modifier
+                        .padding(16.dp)
+                        .fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Box(
+                        modifier = Modifier
+                            .size(48.dp)
+                            .clip(CircleShape)
+                            .shimmerEffect(),
+                    )
+                    Column(
+                        modifier = Modifier.weight(1F),
+                    ) {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth(0.5f)
+                                .clip(RoundedCornerShape(4.dp))
+                                .height(20.dp)
+                                .shimmerEffect(),
+                        )
+                        Spacer(modifier = Modifier.height(16.dp))
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth(0.2f)
+                                .clip(RoundedCornerShape(4.dp))
+                                .height(12.dp)
+                                .shimmerEffect(),
+                        )
+                    }
+                }
+            }
+
+            QuadLineChart(data = listOf())
+            Row(
+                modifier = Modifier
+                    .padding(16.dp)
+                    .fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth(0.3f)
+                        .clip(RoundedCornerShape(4.dp))
+                        .height(24.dp)
+                        .shimmerEffect(),
+                )
+            }
+            Divider(color = Color.Gray)
+            Row(
+                modifier = Modifier
+                    .padding(16.dp)
+                    .padding(top = 8.dp),
+            ) {
+                repeat(4) {
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        modifier = Modifier.weight(1f),
+                    ) {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth(0.6f)
+                                .clip(RoundedCornerShape(4.dp))
+                                .height(20.dp)
+                                .shimmerEffect(),
+                        )
+                        Spacer(modifier = Modifier.height(16.dp))
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth(0.3f)
+                                .clip(RoundedCornerShape(4.dp))
+                                .height(16.dp)
+                                .shimmerEffect(),
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/feature/marketdetail/src/main/java/ir/composenews/marketdetail/MarketDetailScreen.kt b/feature/marketdetail/src/main/java/ir/composenews/marketdetail/MarketDetailScreen.kt
@@ -5,11 +5,15 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 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.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Divider
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.MaterialTheme
@@ -54,7 +58,12 @@ fun MarketDetailRoute(
         }
     }
 
-    BaseRoute(baseViewModel = viewModel) {
+    BaseRoute(
+        baseViewModel = viewModel,
+        shimmerView = {
+            MarketDetailLoadingView()
+        },
+    ) {
         MarketDetailScreen(
             marketDetailState = state,
             onFavoriteClick = {
@@ -71,7 +80,9 @@ private fun MarketDetailScreen(
 ) {
     Box(modifier = Modifier.fillMaxSize()) {
         Column(
-            modifier = Modifier.fillMaxSize(),
+            modifier = Modifier
+                .fillMaxSize()
+                .verticalScroll(rememberScrollState()),
         ) {
             Row(
                 modifier = Modifier.fillMaxWidth(),
@@ -108,6 +119,7 @@ private fun MarketDetailScreen(
             QuadLineChart(data = marketDetailState.marketChart.prices)
             MarketData()
             MarketDetail(marketDetailState)
+            Spacer(modifier = Modifier.height(80.dp))
         }
 
         FloatingActionButton(