Created Shimmer Effect of Home Screen

composeApp/src/commonMain/kotlin/presentation/home/HomeScreen.kt

@@ -35,7 +35,6 @@ import coinify.composeapp.generated.resources.Res
 import coinify.composeapp.generated.resources.coinify
 import coinify.composeapp.generated.resources.poppins_medium
 import component.CryptoCard
-import component.LoadingDialog
 import component.SearchBar
 import data.remote.Resources
 import domain.model.crypto.Listings
@@ -53,24 +52,10 @@ fun HomeScreen(
 ) {
 
     val navController = LocalNavHost.current
-    var listingData by remember { mutableStateOf<Listings?>(null) }
     val latestListingObserver by viewModel.latestListing.collectAsState()
     val searchQueryObserver by viewModel.searchQuery.collectAsState()
     val filteredListingsObserver by viewModel.filteredListing.collectAsState()
-
-    when(latestListingObserver) {
-        is Resources.ERROR -> {}
-
-        is Resources.LOADING -> {
-            LoadingDialog()
-        }
-
-        is Resources.SUCCESS -> {
-            val data = (latestListingObserver as Resources.SUCCESS).response
-            listingData = data
-        }
-
-    }
+    val isLoading by viewModel.isLoading.collectAsState()
 
     LaunchedEffect(Unit) {
         viewModel.getLatestListing()
@@ -113,18 +98,36 @@ fun HomeScreen(
 
             Spacer(modifier = Modifier.height(20.dp))
 
-            filteredListingsObserver.let { dataList ->
+            if (isLoading) {
                 LazyColumn(
                     modifier = Modifier.weight(9f).background(MaterialTheme.colorScheme.background),
                     verticalArrangement = Arrangement.spacedBy(8.dp)
                 ) {
-                    items(dataList) {data ->
-                        CryptoCard(
-                            data
+                    items(10) {
+                        HomeScreenShimmer()
+                    }
+                }
+            } else {
+                when (latestListingObserver) {
+                    is Resources.SUCCESS -> {
+                        LazyColumn(
+                            modifier = Modifier.weight(9f).background(MaterialTheme.colorScheme.background),
+                            verticalArrangement = Arrangement.spacedBy(8.dp)
                         ) {
-                            navController.navigate("${Screens.Details.route}/$it")
+                            items(filteredListingsObserver) { data ->
+                                CryptoCard(
+                                    data
+                                ) {
+                                    navController.navigate("${Screens.Details.route}/$it")
+                                }
+                            }
                         }
                     }
+                    is Resources.ERROR -> {
+                        Text("Error loading data", color = MaterialTheme.colorScheme.error)
+                    }
+
+                    else -> {}
                 }
             }
         }

composeApp/src/commonMain/kotlin/presentation/home/HomeScreenShimmer.kt

@@ -0,0 +1,99 @@
+package presentation.home
+
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+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.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import org.jetbrains.compose.ui.tooling.preview.Preview
+
+@Preview
+@Composable
+fun HomeScreenShimmer() {
+    val shimmerColors = listOf(
+        Color.LightGray.copy(alpha = 0.6f),
+        Color.LightGray.copy(alpha = 0.2f),
+        Color.LightGray.copy(alpha = 0.6f),
+    )
+
+    val transition = rememberInfiniteTransition()
+    val translateAnim = transition.animateFloat(
+        initialValue = 0f,
+        targetValue = 1000f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(durationMillis = 1200, easing = FastOutSlowInEasing),
+            repeatMode = RepeatMode.Restart
+        )
+    )
+
+    val brush = Brush.linearGradient(
+        colors = shimmerColors,
+        start = Offset.Zero,
+        end = Offset(x = translateAnim.value, y = translateAnim.value)
+    )
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(10.dp))
+            .background(MaterialTheme.colorScheme.surfaceContainer)
+            .padding(16.dp)
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.Start
+        ) {
+            Spacer(
+                modifier = Modifier
+                    .size(40.dp)
+                    .clip(CircleShape)
+                    .background(brush)
+            )
+            Spacer(modifier = Modifier.width(14.dp))
+            Column {
+                Spacer(
+                    modifier = Modifier
+                        .height(14.dp)
+                        .width(100.dp)
+                        .clip(RoundedCornerShape(4.dp))
+                        .background(brush)
+                )
+                Spacer(modifier = Modifier.height(8.dp))
+                Spacer(
+                    modifier = Modifier
+                        .height(12.dp)
+                        .width(60.dp)
+                        .clip(RoundedCornerShape(4.dp))
+                        .background(brush)
+                )
+            }
+            Spacer(modifier = Modifier.weight(1f))
+            Column(horizontalAlignment = Alignment.End) {
+                Spacer(
+                    modifier = Modifier
+                        .height(14.dp)
+                        .width(80.dp)
+                        .clip(RoundedCornerShape(4.dp))
+                        .background(brush)
+                )
+                Spacer(modifier = Modifier.height(8.dp))
+                Spacer(
+                    modifier = Modifier
+                        .height(12.dp)
+                        .width(60.dp)
+                        .clip(RoundedCornerShape(4.dp))
+                        .background(brush)
+                )
+            }
+        }
+    }
+}

composeApp/src/commonMain/kotlin/presentation/home/HomeViewModel.kt

@@ -17,6 +17,9 @@ class HomeViewModel(
     private val repository: CoinifyRepository
 ): ViewModel() {
 
+    private val _isLoading = MutableStateFlow(true)
+    val isLoading: StateFlow<Boolean> = _isLoading.asStateFlow()
+
     private val _latestListing = MutableStateFlow<Resources<Listings>>(Resources.LOADING)
     var latestListing: StateFlow<Resources<Listings>> = _latestListing.asStateFlow()
 
@@ -28,13 +31,16 @@ class HomeViewModel(
 
     fun getLatestListing() {
         viewModelScope.launch(Dispatchers.IO) {
+            _isLoading.value = true
             _latestListing.value = Resources.LOADING
             try {
                 val response = repository.getListing()
                 _latestListing.value = Resources.SUCCESS(response)
                 filterData(response.data, "")
             } catch (e: Exception) {
                 _latestListing.value = Resources.ERROR(e.message.toString())
+            } finally {
+                _isLoading.value = false
             }
         }
     }