feat(android): generated placeholder art and a skeleton library

A title without artwork shows the accent as a gradient with its initials
instead of a black card with a play triangle, so a library of unmatched
titles is no longer a grid of identical cards. Art with the name already
over it, and episode stills, get the gradient without initials. While
artwork loads, and while the catalog first loads, the page shows pulsing
shapes where the posters will be rather than a spinner.

The screenshot tests turn artwork loading off, so whether a failed fetch
lands before the capture no longer decides what the image shows.

android/app/src/main/java/io/narl/protonstream/playback/PlayerScreen.kt

@@ -954,6 +954,7 @@ private fun EpisodeChooser(
                             episode.label,
                             Modifier.fillMaxSize(),
                             fallback = episode.thumbnailSource,
+                            labelled = false,
                         )
                         episode.progress?.takeIf { !episode.watched && !current }?.let { progress ->
                             AccentProgress(
@@ -1048,6 +1049,7 @@ private fun UpNextCard(
                     upNext.label,
                     Modifier.fillMaxSize(),
                     fallback = upNext.thumbnailSource,
+                    labelled = false,
                 )
                 Box(Modifier.size(40.dp).clip(CircleShape).background(Color.Black.copy(alpha = 0.5f)))
                 CircularProgressIndicator(

android/app/src/main/java/io/narl/protonstream/ui/HistoryScreen.kt

@@ -130,6 +130,7 @@ private fun HistoryRow(entry: Played, onPlay: () -> Unit, onTitle: () -> Unit, o
                 episode.label,
                 Modifier.fillMaxSize(),
                 fallback = episode.thumbnailSource,
+                labelled = false,
             )
             episode.progress?.takeIf { !episode.watched }?.let { progress ->
                 AccentProgress(

android/app/src/main/java/io/narl/protonstream/ui/LibraryScreen.kt

@@ -44,7 +44,6 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Search
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -138,9 +137,7 @@ internal fun LibraryScreen(
             modifier = Modifier.fillMaxSize(),
         ) {
             when {
-                state.loading -> Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-                    CircularProgressIndicator()
-                }
+                state.loading -> LibrarySkeleton()
                 state.titles.isEmpty() -> EmptyState(
                     "Your library is empty",
                     "Add a Proton Drive public link under Shares, then refresh.",
@@ -291,6 +288,35 @@ private fun LibraryGrid(
     }
 }
 
+/**
+ * The grid's shape before the catalog has answered: posters and their two
+ * lines of text as blocks, so the page does not jump when the titles land.
+ */
+@Composable
+private fun LibrarySkeleton() {
+    LazyVerticalGrid(
+        columns = GridCells.Adaptive(108.dp),
+        modifier = Modifier.fillMaxSize(),
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+        contentPadding = PaddingValues(start = 16.dp, end = 16.dp, top = 8.dp, bottom = 24.dp),
+        userScrollEnabled = false,
+    ) {
+        items(SKELETON_TILES) {
+            Column {
+                Skeleton(Modifier.fillMaxWidth().aspectRatio(2f / 3f).clip(MaterialTheme.shapes.medium))
+                Spacer(Modifier.height(8.dp))
+                Skeleton(Modifier.fillMaxWidth(0.8f).height(12.dp).clip(MaterialTheme.shapes.small))
+                Spacer(Modifier.height(6.dp))
+                Skeleton(Modifier.fillMaxWidth(0.5f).height(10.dp).clip(MaterialTheme.shapes.small))
+            }
+        }
+    }
+}
+
+/** Enough placeholder tiles to fill a tablet's first screen. */
+private const val SKELETON_TILES = 18
+
 /**
  * The title the banner shows: the one watched last, or with nothing part
  * watched, one of the titles the provider has a backdrop for, turning over
@@ -313,6 +339,7 @@ private fun FeaturedBanner(title: TitleRecord, resume: Resumable?, onPlay: (Int)
             title.canonicalName ?: title.name,
             Modifier.fillMaxSize(),
             fallback = title.thumbnailSource,
+            labelled = false,
         )
         Box(
             Modifier.fillMaxSize().background(

android/app/src/main/java/io/narl/protonstream/ui/RemoteArtwork.kt

@@ -6,8 +6,13 @@ import android.graphics.BitmapFactory
 import android.util.LruCache
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+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.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -16,12 +21,19 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.graphics.lerp
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.font.FontWeight
 import io.narl.protonstream.native.NativeRuntime
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.withContext
@@ -64,7 +76,9 @@ internal val EpisodeRecord.thumbnailSource: ThumbnailSource
  *
  * [fallback] is used only when there is no provider artwork or it fails to
  * load, which — with metadata off — is the common case rather than the rare
- * one.
+ * one. Until either answers, the box pulses as a skeleton; when neither has
+ * anything, it shows [ArtworkPlaceholder] rather than an empty card — without
+ * initials when [labelled] is false, for art with the name already over it.
  */
 @Composable
 internal fun RemoteArtwork(
@@ -72,19 +86,98 @@ internal fun RemoteArtwork(
     description: String,
     modifier: Modifier = Modifier,
     fallback: ThumbnailSource? = null,
+    labelled: Boolean = true,
 ) {
     val context = LocalContext.current
-    var image by remember(url, fallback) { mutableStateOf<ImageBitmap?>(null) }
-    LaunchedEffect(url, fallback) {
-        image = (loadArtwork(context, url) ?: loadThumbnail(fallback))?.asImageBitmap()
+    val enabled = LocalArtworkLoading.current
+    var image by remember(url, fallback) { mutableStateOf<ArtworkLoad>(ArtworkLoad.Pending) }
+    LaunchedEffect(url, fallback, enabled) {
+        if (!enabled) {
+            image = ArtworkLoad.Missing
+            return@LaunchedEffect
+        }
+        image = (loadArtwork(context, url) ?: loadThumbnail(fallback))
+            ?.let { ArtworkLoad.Loaded(it.asImageBitmap()) }
+            ?: ArtworkLoad.Missing
     }
-    Box(modifier.background(MaterialTheme.colorScheme.surfaceVariant), contentAlignment = Alignment.Center) {
-        image?.let {
-            Image(it, description, Modifier.fillMaxSize(), contentScale = ContentScale.Crop)
-        } ?: Text("▶", style = MaterialTheme.typography.displaySmall)
+    when (val loaded = image) {
+        ArtworkLoad.Pending -> Skeleton(modifier)
+        ArtworkLoad.Missing -> ArtworkPlaceholder(description, modifier, labelled)
+        is ArtworkLoad.Loaded -> Image(loaded.image, description, modifier, contentScale = ContentScale.Crop)
     }
 }
 
+private sealed interface ArtworkLoad {
+    data object Pending : ArtworkLoad
+    data object Missing : ArtworkLoad
+    data class Loaded(val image: ImageBitmap) : ArtworkLoad
+}
+
+/**
+ * Whether [RemoteArtwork] fetches anything at all.
+ *
+ * Off in the screenshot tests: there is no bridge on the host, and whether a
+ * failed fetch lands before or after the capture would decide between a
+ * skeleton and a placeholder in the committed image.
+ */
+internal val LocalArtworkLoading = staticCompositionLocalOf { true }
+
+/**
+ * Something being loaded: the surface tint, breathing.
+ *
+ * A spinner per tile is a grid of spinners; a shape where the poster will be
+ * says what is coming and where, and settles the layout before it arrives.
+ */
+@Composable
+internal fun Skeleton(modifier: Modifier = Modifier) {
+    val pulse by rememberInfiniteTransition(label = "skeleton").animateFloat(
+        initialValue = 0.55f,
+        targetValue = 1f,
+        animationSpec = infiniteRepeatable(tween(800), RepeatMode.Reverse),
+        label = "skeleton alpha",
+    )
+    Box(modifier.graphicsLayer { alpha = pulse }.background(MaterialTheme.colorScheme.surfaceVariant))
+}
+
+/**
+ * Art for a title that has none: the accent as a gradient, and its initials.
+ *
+ * A black card with a play triangle on it said nothing about which title it
+ * was, so a grid of unmatched titles was a grid of identical cards. Each name
+ * sets where on the accent ramp its gradient starts, so neighbours differ
+ * while every one stays in the theme's colours.
+ */
+@Composable
+internal fun ArtworkPlaceholder(name: String, modifier: Modifier = Modifier, labelled: Boolean = true) {
+    val scheme = MaterialTheme.colorScheme
+    val brush = remember(name, scheme.primary, scheme.secondary) {
+        val start = lerp(scheme.primary, scheme.secondary, (name.hashCode().mod(5)) / 4f)
+        Brush.linearGradient(listOf(start, lerp(start, Color.Black, 0.55f)))
+    }
+    BoxWithConstraints(modifier.background(brush), contentAlignment = Alignment.Center) {
+        if (!labelled) return@BoxWithConstraints
+        val size = with(LocalDensity.current) { (minOf(maxWidth, maxHeight) * 0.3f).toSp() }
+        Text(
+            initials(name),
+            color = Color.White.copy(alpha = 0.9f),
+            fontSize = size,
+            fontWeight = FontWeight.SemiBold,
+            maxLines = 1,
+        )
+    }
+}
+
+/**
+ * "Oshi no Ko" is "OK", "Akira" is "A": the first letters of up to two
+ * capitalised words, so particles and articles in a romanised name do not
+ * take a slot. A name with no capitals uses its first two words.
+ */
+internal fun initials(name: String): String {
+    val words = name.split(' ', '-', '_', '.', ':').filter { word -> word.firstOrNull()?.isLetterOrDigit() == true }
+    val picked = words.filter { it.first().isUpperCase() || it.first().isDigit() }.ifEmpty { words }
+    return picked.take(2).joinToString("") { it.first().uppercase() }
+}
+
 /**
  * The same HTTPS-only fetch behind the library grid, reusable off the composition.
  *

android/app/src/main/java/io/narl/protonstream/ui/TitleScreen.kt

@@ -131,6 +131,7 @@ internal fun TitleScreen(
                     title.canonicalName ?: title.name,
                     Modifier.fillMaxSize(),
                     fallback = title.thumbnailSource,
+                    labelled = false,
                 )
                 Box(
                     Modifier.fillMaxSize().background(
@@ -386,6 +387,7 @@ private fun EpisodeRow(
                     heading,
                     Modifier.fillMaxSize(),
                     fallback = episode.thumbnailSource,
+                    labelled = false,
                 )
                 episode.progress?.takeIf { !episode.watched }?.let { progress ->
                     AccentProgress(