Top artist

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)
+    )
+}

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)
-        }
-    }
 }

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<Int>(30, {0})
+            ) { item ->
+                Spacer( modifier = Modifier
+                    .padding(all = ProtonDimension.Spacing8)
+                    .clip(RoundedCornerShape(ProtonDimension.Corner8))
+                    .requiredHeight(ProtonDimension.ComponentSize200)
+                    .size(ProtonDimension.ComponentSize200)
+                    .background(brush = brush))
+            }
+        }
+    }
+}
+