diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/patterns/loader/ProtonShimmerBrush.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/patterns/loader/ProtonShimmerBrush.kt new file mode 100644 index 00000000..97a741bb --- /dev/null +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/patterns/loader/ProtonShimmerBrush.kt @@ -0,0 +1,37 @@ +package com.efedaniel.spotifystats.ui.proton.patterns.loader + +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.runtime.Composable +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color + +@Composable +fun shimmerBrush(showShimmer: Boolean = true, targetValue:Float = 1000f): Brush { + + 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 translateAnimation = transition.animateFloat( + initialValue = 0f, + targetValue = targetValue, + animationSpec = infiniteRepeatable( + animation = tween(800), + repeatMode = RepeatMode.Reverse + ), + label = "" + ) + return Brush.linearGradient( + colors = shimmerColors, + start = Offset.Zero, + end = Offset(x = translateAnimation.value, y = translateAnimation.value) + ) +} diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt index 926732e2..a7452864 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt @@ -87,11 +87,4 @@ fun ArtistSection( modifier = Modifier.padding(start = ProtonDimension.Spacing8) ) } - - Spacer(modifier = Modifier.height(ProtonDimension.Spacing4)) - LazyRow() { - items(artist.genres) { item -> - Chip(text = item) - } - } } diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt index 918ae414..f711f05c 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt @@ -2,6 +2,11 @@ package com.efedaniel.spotifystats.ui.scene.topartist import androidx.compose.animation.AnimatedContent import androidx.compose.animation.ExperimentalAnimationApi +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.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.with @@ -14,10 +19,13 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.FlowRow 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.requiredHeight +import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.foundation.lazy.grid.items @@ -35,10 +43,13 @@ import androidx.compose.runtime.setValue 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.layout.ContentScale import androidx.compose.ui.layout.onGloballyPositioned import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.navigation.NavHostController import com.efedaniel.spotifystats.core.ScreenState @@ -47,6 +58,7 @@ import com.efedaniel.spotifystats.domain.model.TopArtist import com.efedaniel.spotifystats.ui.proton.components.image.ProtonImage import com.efedaniel.spotifystats.ui.proton.components.text.ProtonText import com.efedaniel.spotifystats.ui.proton.patterns.loader.ProtonLoader +import com.efedaniel.spotifystats.ui.proton.patterns.loader.shimmerBrush import com.efedaniel.spotifystats.ui.proton.theme.ProtonTheme import com.efedaniel.spotifystats.ui.proton.tokens.dimension.ProtonDimension import com.efedaniel.spotifystats.ui.scene.topartist.TopArtistEvent.ArtistClick @@ -102,8 +114,12 @@ fun TopArtistScreen( ) { when(it) { ScreenState.LOADING -> { + Column { + + } + TopArtistShimmerScreen(brush = shimmerBrush()) // FixMe: Replace with shimmer effect loading - ProtonLoader() + //ProtonLoader() } ScreenState.SUCCESS -> { TopArtistContent( @@ -204,3 +220,27 @@ private fun TopArtistCard( } } } + + +@Composable +fun TopArtistShimmerScreen(modifier: Modifier = Modifier, brush: Brush) { + + Column() { + LazyVerticalGrid( + columns = GridCells.Adaptive(minSize = ProtonDimension.ComponentSize200), + modifier = modifier + ) { + items( + items = List(30, {0}) + ) { item -> + Spacer( modifier = Modifier + .padding(all = ProtonDimension.Spacing8) + .clip(RoundedCornerShape(ProtonDimension.Corner8)) + .requiredHeight(ProtonDimension.ComponentSize200) + .size(ProtonDimension.ComponentSize200) + .background(brush = brush)) + } + } + } +} +