Added HomeScreenShimmer

AshuTyagi16 · Jan 11, 2024 · f2575d7 · f2575d7
1 parent c74d3e9
commit f2575d7
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 142 deletions.
diff --git a/feature-homepage/build.gradle.kts b/feature-homepage/build.gradle.kts
@@ -49,6 +49,9 @@ dependencies {
  // Shared Feature HomePage Module
  implementation(project(":shared:feature-homepage"))
 
+ // Compose Shimmer
+ implementation(libs.compose.shimmer)
+
  // Coil (Image Loading)
  implementation(libs.coil)
 

diff --git a/feature-homepage/src/main/java/com/spotify/app/feature_homepage/ui/HomePageComposable.kt b/feature-homepage/src/main/java/com/spotify/app/feature_homepage/ui/HomePageComposable.kt
@@ -31,6 +31,7 @@ import androidx.compose.ui.unit.sp
 import coil.compose.AsyncImage
 import com.spotify.app.core_base.shared.domain.model.AlbumItem
 import com.spotify.app.feature_homepage.shared.ui.HomePageViewModel
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
 @Composable
@@ -56,167 +57,159 @@ fun HomePageComposable(
  .fillMaxSize()
  .background(Color.Black)
  ) {
- LazyColumn {
- item {
- Text(
- text = "PLAYLISTS ${playlistState.value.status.name} :: ${playlistState.value.errorMessage.orEmpty()}",
- color = Color.White
- )
- }
- item {
- Spacer(
- modifier = Modifier
- .fillMaxWidth()
- .height(20.dp)
- )
- }
- item {
- if (playlists.isNotEmpty()) {
- Text(
- text = "Featured Playlists",
- fontSize = 24.sp,
- color = Color.White,
- fontStyle = FontStyle.Normal,
- fontWeight = FontWeight.ExtraBold,
- fontFamily = FontFamily.SansSerif,
+ if (playlists.isNotEmpty() && albums.isNotEmpty()) {
+ LazyColumn {
+ item {
+ Spacer(
  modifier = Modifier
- .wrapContentSize()
- .padding(horizontal = 6.dp)
+ .fillMaxWidth()
+ .height(20.dp)
  )
  }
- }
- item {
- LazyRow(
- modifier = Modifier
- .padding(vertical = 10.dp)
- ) {
- items(
- items = playlists,
- key = { it.id }
+ item {
+ if (playlists.isNotEmpty()) {
+ Text(
+ text = "Featured Playlists",
+ fontSize = 24.sp,
+ color = Color.White,
+ fontStyle = FontStyle.Normal,
+ fontWeight = FontWeight.ExtraBold,
+ fontFamily = FontFamily.SansSerif,
+ modifier = Modifier
+ .wrapContentSize()
+ .padding(horizontal = 6.dp)
+ )
+ }
+ }
+ item {
+ LazyRow(
+ modifier = Modifier
+ .padding(vertical = 10.dp)
  ) {
- Column {
- AsyncImage(
- model = it.image,
- contentDescription = "Playlist ${it.name}",
- modifier = Modifier
- .padding(horizontal = 6.dp)
- .clip(RoundedCornerShape(8.dp))
- .width(200.dp)
- .height(200.dp)
- .clickable {
- onPlaylistClick.invoke(it.id)
- }
- )
+ items(
+ items = playlists,
+ key = { it.id }
+ ) {
+ Column {
+ AsyncImage(
+ model = it.image,
+ contentDescription = "Playlist ${it.name}",
+ modifier = Modifier
+ .padding(horizontal = 6.dp)
+ .clip(RoundedCornerShape(8.dp))
+ .width(200.dp)
+ .height(200.dp)
+ .clickable {
+ onPlaylistClick.invoke(it.id)
+ }
+ )
 
- Text(
- text = it.name,
- color = Color.White,
- fontWeight = FontWeight.Normal,
- fontSize = 12.sp,
- fontFamily = FontFamily.SansSerif,
- maxLines = 1,
- overflow = TextOverflow.Ellipsis,
- modifier = Modifier
- .padding(start = 6.dp, top = 4.dp)
- .width(180.dp)
- )
+  Text(
+  text = it.name,
+  color = Color.White,
+  fontWeight = FontWeight.Normal,
+  fontSize = 12.sp,
+  fontFamily = FontFamily.SansSerif,
+  maxLines = 1,
+  overflow = TextOverflow.Ellipsis,
+  modifier = Modifier
+  .padding(start = 6.dp, top = 4.dp)
+  .width(180.dp)
+  )
 
- Text(
- text = it.description,
- color = Color.White.copy(alpha = 0.8f),
- fontWeight = FontWeight.Light,
- fontSize = 10.sp,
- fontFamily = FontFamily.SansSerif,
- maxLines = 1,
- overflow = TextOverflow.Ellipsis,
- modifier = Modifier
- .padding(start = 6.dp, top = 2.dp)
- .width(180.dp)
- )
+ Text(
+ text = it.description,
+ color = Color.White.copy(alpha = 0.8f),
+ fontWeight = FontWeight.Light,
+ fontSize = 10.sp,
+ fontFamily = FontFamily.SansSerif,
+ maxLines = 1,
+ overflow = TextOverflow.Ellipsis,
+ modifier = Modifier
+ .padding(start = 6.dp, top = 2.dp)
+ .width(180.dp)
+ )
+ }
  }
  }
  }
- }
- item {
- Text(
- text = "ALBUMS ${albumState.value.status.name} :: ${albumState.value.errorMessage.orEmpty()}",
- color = Color.White
- )
- }
- item {
- Spacer(
- modifier = Modifier
- .fillMaxWidth()
- .height(20.dp)
- )
- }
- item {
- if (albums.isNotEmpty()) {
- Text(
- text = "Featured Albums",
- fontSize = 24.sp,
- color = Color.White,
- fontStyle = FontStyle.Normal,
- fontWeight = FontWeight.ExtraBold,
- fontFamily = FontFamily.SansSerif,
+ item {
+ Spacer(
  modifier = Modifier
- .wrapContentSize()
- .padding(horizontal = 6.dp)
+ .fillMaxWidth()
+ .height(20.dp)
  )
  }
- }
- item {
- LazyRow(
- modifier = Modifier
- .padding(vertical = 10.dp)
- ) {
- items(
- items = albums,
- key = { it.id }
+ item {
+ if (albums.isNotEmpty()) {
+ Text(
+ text = "Featured Albums",
+ fontSize = 24.sp,
+ color = Color.White,
+ fontStyle = FontStyle.Normal,
+ fontWeight = FontWeight.ExtraBold,
+ fontFamily = FontFamily.SansSerif,
+ modifier = Modifier
+ .wrapContentSize()
+ .padding(horizontal = 6.dp)
+ )
+ }
+ }
+ item {
+ LazyRow(
+ modifier = Modifier
+ .padding(vertical = 10.dp)
  ) {
- Column {
- AsyncImage(
- model = it.image,
- contentDescription = "Album ${it.name}",
- modifier = Modifier
- .padding(horizontal = 6.dp)
- .clip(RoundedCornerShape(8.dp))
- .width(200.dp)
- .height(200.dp)
- .clickable {
- onAlbumClick.invoke(it)
- }
- )
+ items(
+ items = albums,
+ key = { it.id }
+ ) {
+ Column {
+ AsyncImage(
+ model = it.image,
+ contentDescription = "Album ${it.name}",
+ modifier = Modifier
+ .padding(horizontal = 6.dp)
+ .clip(RoundedCornerShape(8.dp))
+ .width(200.dp)
+ .height(200.dp)
+ .clickable {
+ onAlbumClick.invoke(it)
+ }
+ )
 
- Text(
- text = it.name,
- color = Color.White,
- fontWeight = FontWeight.Normal,
- fontSize = 12.sp,
- fontFamily = FontFamily.SansSerif,
- maxLines = 1,
- overflow = TextOverflow.Ellipsis,
- modifier = Modifier
- .padding(start = 6.dp, top = 4.dp)
- .width(180.dp)
- )
+  Text(
+  text = it.name,
+  color = Color.White,
+  fontWeight = FontWeight.Normal,
+  fontSize = 12.sp,
+  fontFamily = FontFamily.SansSerif,
+  maxLines = 1,
+  overflow = TextOverflow.Ellipsis,
+  modifier = Modifier
+  .padding(start = 6.dp, top = 4.dp)
+  .width(180.dp)
+  )
 
- Text(
- text = it.artists,
- color = Color.White.copy(alpha = 0.8f),
- fontWeight = FontWeight.Light,
- fontSize = 10.sp,
- fontFamily = FontFamily.SansSerif,
- maxLines = 1,
- overflow = TextOverflow.Ellipsis,
- modifier = Modifier
- .padding(start = 6.dp, top = 2.dp)
- .width(180.dp)
- )
+ Text(
+ text = it.artists,
+ color = Color.White.copy(alpha = 0.8f),
+ fontWeight = FontWeight.Light,
+ fontSize = 10.sp,
+ fontFamily = FontFamily.SansSerif,
+ maxLines = 1,
+ overflow = TextOverflow.Ellipsis,
+ modifier = Modifier
+ .padding(start = 6.dp, top = 2.dp)
+ .width(180.dp)
+ )
+ }
  }
  }
  }
  }
+ } else {
+ HomeScreenPlaceholder()
  }
  }
 }
diff --git a/feature-homepage/src/main/java/com/spotify/app/feature_homepage/ui/HomeScreenPlaceholder.kt b/feature-homepage/src/main/java/com/spotify/app/feature_homepage/ui/HomeScreenPlaceholder.kt
@@ -0,0 +1,59 @@
+package com.spotify.app.feature_homepage.ui
+
+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.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.valentinilk.shimmer.shimmer
+
+@Composable
+fun HomeScreenPlaceholder() {
+ Column(
+ modifier = Modifier
+ .fillMaxSize()
+ .shimmer()
+ ) {
+ repeat(3) {
+ Row(
+ modifier = Modifier
+ .padding(10.dp)
+ ) {
+ repeat(4) {
+ Column(
+ modifier = Modifier
+ .wrapContentSize()
+ .padding(10.dp)
+ ) {
+ Box(
+ modifier = Modifier
+ .clip(RoundedCornerShape(8.dp))
+ .width(200.dp)
+ .height(200.dp)
+ .background(Color.White.copy(alpha = 0.3f))
+ .padding(horizontal = 6.dp)
+ )
+ Box(
+ modifier = Modifier
+ .padding(4.dp)
+ .width(120.dp)
+ .height(8.dp)
+ .clip(RoundedCornerShape(8.dp))
+ .background(Color.White.copy(alpha = 0.3f))
+ )
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -39,6 +39,7 @@ coil = "2.5.0"
 navigation-component = "2.7.6"
 ktlint-gradle = "12.1.0"
 paging = "3.3.0-alpha02"
+compose-shimmer = "1.2.0"
 
 [libraries]
 ## Core-Ktx
@@ -56,6 +57,9 @@ multiplatform-settings-couroutine = { module = "com.russhwolf:multiplatform-sett
 paging = { module = "androidx.paging:paging-common", version.ref = "paging" }
 paging-compose = { module = "androidx.paging:paging-compose", version.ref = "paging" }
 
+## Compose Shimmer
+compose-shimmer = { module = "com.valentinilk.shimmer:compose-shimmer", version.ref = "compose-shimmer" }
+
 ## Compose
 activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activity-compose" }
 compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "compose-bom" }