Fix misaligned placeholders

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/ShimmerHost.kt

@@ -2,6 +2,7 @@ package it.vfsfitvnm.vimusic.ui.components.themed
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -14,20 +15,20 @@ import com.valentinilk.shimmer.shimmer
 
 @Composable
 fun ShimmerHost(
+    modifier: Modifier = Modifier,
     horizontalAlignment: Alignment.Horizontal = Alignment.Start,
-    content: @Composable ColumnScope.() -> Unit,
+    content: @Composable ColumnScope.() -> Unit
 ) {
     Column(
         horizontalAlignment = horizontalAlignment,
-        modifier = Modifier
+        modifier = modifier
             .shimmer()
+            .fillMaxSize()
             .graphicsLayer(alpha = 0.99f)
             .drawWithContent {
                 drawContent()
                 drawRect(
-                    brush = Brush.verticalGradient(
+                    brush = Brush.verticalGradient(listOf(Color.Black, Color.Transparent)),
-                        listOf(Color.Black, Color.Transparent)
-                    ),
                     blendMode = BlendMode.DstIn
                 )
             },

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/album/AlbumScreen.kt

@@ -8,7 +8,6 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -44,7 +43,6 @@ import it.vfsfitvnm.vimusic.ui.items.AlbumItemPlaceholder
 import it.vfsfitvnm.vimusic.ui.screens.albumRoute
 import it.vfsfitvnm.vimusic.ui.screens.globalRoutes
 import it.vfsfitvnm.vimusic.ui.screens.searchresult.ItemsPage
-import it.vfsfitvnm.vimusic.ui.styling.Dimensions
 import it.vfsfitvnm.vimusic.ui.styling.LocalAppearance
 import it.vfsfitvnm.vimusic.ui.styling.px
 import it.vfsfitvnm.vimusic.ui.styling.shimmer
@@ -182,25 +180,24 @@ fun AlbumScreen(browseId: String) {
             val thumbnailContent: @Composable ColumnScope.() -> Unit = {
                 val (colorPalette, _, thumbnailShape) = LocalAppearance.current
 
-                if (album?.timestamp == null) {
+                BoxWithConstraints(
-                    Spacer(
+                    contentAlignment = Alignment.Center,
-                        modifier = Modifier
+                    modifier = Modifier
-                            .shimmer()
+                        .fillMaxWidth()
-                            .align(Alignment.CenterHorizontally)
+                ) {
-                            .padding(all = 16.dp)
+                    val thumbnailSizeDp = maxWidth - 64.dp
-                            .clip(thumbnailShape)
+                    val thumbnailSizePx = thumbnailSizeDp.px
-                            .fillMaxWidth()
-                            .aspectRatio(1f)
-                            .background(colorPalette.shimmer)
-                    )
-                } else {
-                    BoxWithConstraints(
-                        modifier = Modifier
-                            .align(Alignment.CenterHorizontally)
-                    ) {
-                        val thumbnailSizeDp = maxWidth - Dimensions.navigationRailWidth
-                        val thumbnailSizePx = (thumbnailSizeDp - 32.dp).px
 
+                    if (album?.timestamp == null) {
+                        Spacer(
+                            modifier = Modifier
+                                .padding(all = 16.dp)
+                                .shimmer()
+                                .clip(thumbnailShape)
+                                .size(thumbnailSizeDp)
+                                .background(colorPalette.shimmer)
+                        )
+                    } else {
                         AsyncImage(
                             model = album?.thumbnailUrl?.thumbnail(thumbnailSizePx),
                             contentDescription = null,

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/album/AlbumSongs.kt

@@ -133,7 +133,10 @@ fun AlbumSongs(
 
             if (songs.isEmpty()) {
                 item(key = "loading") {
-                    ShimmerHost {
+                    ShimmerHost(
+                        modifier = Modifier
+                            .fillParentMaxSize()
+                    ) {
                         repeat(4) {
                             SongItemPlaceholder(thumbnailSizeDp = Dimensions.thumbnails.song)
                         }

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/artist/ArtistScreen.kt

@@ -9,7 +9,6 @@ import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -125,25 +124,26 @@ fun ArtistScreen(browseId: String) {
 
         host {
             val thumbnailContent: @Composable ColumnScope.() -> Unit = {
-                if (artist?.timestamp == null) {
+                BoxWithConstraints(
-                    Spacer(
+                    contentAlignment = Alignment.Center,
-                        modifier = Modifier
+                    modifier = Modifier
-                            .shimmer()
+                        .fillMaxWidth()
-                            .align(Alignment.CenterHorizontally)
+                ) {
-                            .padding(all = 16.dp)
+                    val thumbnailSizeDp = maxWidth - 64.dp
-                            .clip(CircleShape)
+                    val thumbnailSizePx = thumbnailSizeDp.px
-                            .fillMaxWidth()
-                            .aspectRatio(1f)
-                            .background(LocalAppearance.current.colorPalette.shimmer)
-                    )
-                } else {
-                    BoxWithConstraints(
-                        modifier = Modifier
-                            .align(Alignment.CenterHorizontally)
-                    ) {
-                        val thumbnailSizeDp = maxWidth - Dimensions.navigationRailWidth
-                        val thumbnailSizePx = (thumbnailSizeDp - 32.dp).px
 
+                    if (artist?.timestamp == null) {
+                        val (colorPalette) = LocalAppearance.current
+
+                        Spacer(
+                            modifier = Modifier
+                                .padding(all = 16.dp)
+                                .shimmer()
+                                .clip(CircleShape)
+                                .size(thumbnailSizeDp)
+                                .background(colorPalette.shimmer)
+                        )
+                    } else {
                         AsyncImage(
                             model = artist?.thumbnailUrl?.thumbnail(thumbnailSizePx),
                             contentDescription = null,

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/playlist/PlaylistSongList.kt

@@ -99,9 +99,12 @@ fun PlaylistSongList(
             .collect { value = it }
     }
 
-    BoxWithConstraints {
+    BoxWithConstraints(
-        val thumbnailSizeDp = maxWidth - Dimensions.navigationRailWidth
+        modifier = Modifier
-        val thumbnailSizePx = (thumbnailSizeDp - 32.dp).px
+            .fillMaxWidth()
+    ) {
+        val thumbnailSizeDp = maxWidth - 64.dp
+        val thumbnailSizePx = thumbnailSizeDp.px
 
         val songThumbnailSizeDp = Dimensions.thumbnails.song
         val songThumbnailSizePx = songThumbnailSizeDp.px
@@ -182,7 +185,6 @@ fun PlaylistSongList(
                             model = playlist.thumbnail?.size(thumbnailSizePx),
                             contentDescription = null,
                             modifier = Modifier
-                                .align(Alignment.CenterHorizontally)
                                 .padding(all = 16.dp)
                                 .clip(thumbnailShape)
                                 .size(thumbnailSizeDp)
@@ -249,7 +251,6 @@ fun PlaylistSongList(
 
             Spacer(
                 modifier = Modifier
-                    .align(Alignment.CenterHorizontally)
                     .padding(all = 16.dp)
                     .clip(thumbnailShape)
                     .size(thumbnailSizeDp)

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/searchresult/ItemsPage.kt

@@ -103,7 +103,10 @@ inline fun <T : Innertube.Item> ItemsPage(
 
         if (!(itemsPage != null && itemsPage?.continuation == null)) {
             item(key = "loading") {
-                ShimmerHost {
+                ShimmerHost(
+                    modifier = Modifier
+                        .fillParentMaxSize()
+                ) {
                     repeat(if (itemsPage?.items.isNullOrEmpty()) initialPlaceholderCount else continuationPlaceholderCount) {
                         itemPlaceholderContent()
                     }