crossfade cover art and show the thumbnail under the full image

app/src/main/kotlin/com/subtracks/SubtracksApp.kt

@@ -4,6 +4,7 @@ import android.app.Application
 import coil3.ImageLoader
 import coil3.SingletonImageLoader
 import coil3.network.okhttp.OkHttpNetworkFetcherFactory
+import coil3.request.crossfade
 import com.subtracks.di.appModule
 import okhttp3.OkHttpClient
 import org.koin.core.context.startKoin
@@ -22,6 +23,7 @@ class SubtracksApp : Application() {
             ImageLoader
                 .Builder(context)
                 .components { add(OkHttpNetworkFetcherFactory(callFactory = { http })) }
+                .crossfade(150)
                 .build()
         }
     }

app/src/main/kotlin/com/subtracks/ui/components/Components.kt

@@ -1,5 +1,6 @@
 package com.subtracks.ui.components
 
+import android.content.Context
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
@@ -8,6 +9,7 @@ import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
@@ -23,7 +25,9 @@ fun CoverArt(
     ref: CoverArtRef?,
     name: String,
     modifier: Modifier = Modifier,
+    thumbnailRef: CoverArtRef? = null,
 ) {
+    val context = LocalPlatformContext.current
     Box(modifier = modifier.background(MaterialTheme.colorScheme.surfaceVariant)) {
         Text(
             text = name.trim().take(1).uppercase(),
@@ -31,15 +35,17 @@ fun CoverArt(
             color = MaterialTheme.colorScheme.onSurfaceVariant,
             modifier = Modifier.align(Alignment.Center),
         )
+        if (thumbnailRef != null && thumbnailRef != ref) {
+            AsyncImage(
+                model = remember(thumbnailRef) { imageRequest(context, thumbnailRef) },
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier.fillMaxSize(),
+            )
+        }
         if (ref != null) {
             AsyncImage(
-                model =
+                model = remember(ref) { imageRequest(context, ref) },
-                    ImageRequest
-                        .Builder(LocalPlatformContext.current)
-                        .data(ref.url)
-                        .memoryCacheKey(ref.cacheKey)
-                        .diskCacheKey(ref.cacheKey)
-                        .build(),
                 contentDescription = null,
                 contentScale = ContentScale.Crop,
                 modifier = Modifier.fillMaxSize(),
@@ -48,6 +54,17 @@ fun CoverArt(
     }
 }
 
+private fun imageRequest(
+    context: Context,
+    ref: CoverArtRef,
+): ImageRequest =
+    ImageRequest
+        .Builder(context)
+        .data(ref.url)
+        .memoryCacheKey(ref.cacheKey)
+        .diskCacheKey(ref.cacheKey)
+        .build()
+
 @Composable
 fun LoadingState(modifier: Modifier = Modifier) {
     Box(modifier.fillMaxSize(), contentAlignment = Alignment.Center) {

app/src/main/kotlin/com/subtracks/ui/library/AlbumDetailScreen.kt

@@ -282,6 +282,7 @@ private fun AlbumHeader(
         CoverArt(
             ref = coverArt(album?.coverArt, false),
             name = album?.name.orEmpty(),
+            thumbnailRef = coverArt(album?.coverArt, true),
             modifier =
                 Modifier
                     .fillMaxWidth(0.86f)