Merge pull request #114 from SuhasDissa/main

Added a shimmer effect for the wallpaper grid

app/src/main/java/com/bnyro/wallpaper/ui/components/ShimmerGrid.kt

@@ -0,0 +1,30 @@
+package com.bnyro.wallpaper.ui.components
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+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.unit.dp
+import com.bnyro.wallpaper.util.shimmer
+
+@Composable
+fun ShimmerGrid() {
+    LazyVerticalGrid(
+        columns = GridCells.Fixed(2)
+    ) {
+        items(10) {
+            Box(
+                modifier = Modifier
+                    .height(300.dp)
+                    .padding(5.dp)
+                    .clip(RoundedCornerShape(10.dp))
+                    .shimmer(600f)
+            )
+        }
+    }
+}

app/src/main/java/com/bnyro/wallpaper/ui/pages/WallpaperPage.kt

@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.FilterList
 import androidx.compose.material.icons.filled.Shuffle
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
@@ -24,6 +23,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import com.bnyro.wallpaper.db.obj.Wallpaper
+import com.bnyro.wallpaper.ui.components.ShimmerGrid
 import com.bnyro.wallpaper.ui.components.WallpaperGrid
 import com.bnyro.wallpaper.ui.components.WallpaperPreview
 import com.bnyro.wallpaper.ui.components.dialogs.FilterDialog
@@ -64,10 +64,7 @@ fun WallpaperPage(
                 }
             }
         } else {
-            CircularProgressIndicator(
-                modifier = Modifier
-                    .align(Alignment.Center)
-            )
+            ShimmerGrid()
         }
 
         Row(
@@ -79,19 +76,19 @@ fun WallpaperPage(
             FloatingActionButton(
                 modifier = Modifier
                     .padding(horizontal = 10.dp),
-                    /*.combinedClickable(
-                        onLongClick = {
-                            Toast.makeText(context, R.string.applying_random, Toast.LENGTH_SHORT).show()
-                            CoroutineScope(Dispatchers.IO).launch {
-                                val wallpaperUrl = viewModel.api.getRandomWallpaperUrl()
-                                ImageHelper.urlToBitmap(this, wallpaperUrl, context) {
-                                    WallpaperHelper.setWallpaper(context, it, WallpaperMode.BOTH)
-                                }
+                /*.combinedClickable(
+                    onLongClick = {
+                        Toast.makeText(context, R.string.applying_random, Toast.LENGTH_SHORT).show()
+                        CoroutineScope(Dispatchers.IO).launch {
+                            val wallpaperUrl = viewModel.api.getRandomWallpaperUrl()
+                            ImageHelper.urlToBitmap(this, wallpaperUrl, context) {
+                                WallpaperHelper.setWallpaper(context, it, WallpaperMode.BOTH)
                             }
                         }
-                    ),
+                    }
+                ),
 
-                     */
+                 */
                 onClick = {
                     selectedWallpaper = viewModel.wallpapers.randomOrNull()
                 }

app/src/main/java/com/bnyro/wallpaper/util/ShimmerEffect.kt

@@ -0,0 +1,59 @@
+package com.bnyro.wallpaper.util
+
+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.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+/**
+ * @param length Diagonal length of the element
+ */
+fun Modifier.shimmer(length: Float): Modifier = composed {
+    val transition = rememberInfiniteTransition(label = "shimmer transition")
+    val offset by transition.animateFloat(
+        initialValue = -100f,
+        targetValue = length + 100f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(1500),
+            repeatMode = RepeatMode.Restart
+        ),
+        label = "gradient offset"
+    )
+    val color = if (isSystemInDarkTheme()) Color.DarkGray else Color.LightGray
+    val startOffset = -length / 4 + offset
+    val endOffset = length / 4 + offset
+    val brush = Brush.linearGradient(
+        colors = listOf(
+            color.copy(alpha = 0.2f),
+            color.copy(alpha = 0.6f),
+            color.copy(alpha = 0.2f)
+        ),
+        start = Offset(x = startOffset, y = startOffset),
+        end = Offset(x = endOffset, y = endOffset)
+    )
+    this.then(background(brush))
+}
+
+@Preview
+@Composable
+private fun ShimmerPreview() {
+    Box(
+        modifier = Modifier
+            .size(300.dp)
+            .shimmer(400f)
+    )
+}