loading: one loading card on the grids, not a full fake grid (#31)

My videos, Subscriptions, History and the channel pages painted two whole rows
of placeholder cards on first open, and Channels painted two stub rows. Show a
single loading card instead, matching the Home rows.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Jeena 2026-10-15 14:20:35 +00:00
parent c3b5908f31
commit 89171b0b0d
2 changed files with 16 additions and 26 deletions

View file

@ -317,21 +317,18 @@ fun ChannelsScreen(
when {
viewModel.loading && viewModel.userRows.isEmpty() ->
// Placeholder rows while the channels load (issue #19): header stub
// + a row of shimmer card-shaped placeholders, twice.
// One row header stub + a single loading card, not a fake grid (#31).
androidx.compose.foundation.layout.Column {
repeat(2) {
Box(Modifier.padding(start = 16.dp, top = 12.dp, bottom = 4.dp)) {
Box(
Modifier
.width(180.dp)
.height(22.dp)
.clip(CircleShape)
.background(Color(0xFF232323)),
)
}
ShimmerRow()
Box(Modifier.padding(start = 16.dp, top = 12.dp, bottom = 4.dp)) {
Box(
Modifier
.width(180.dp)
.height(22.dp)
.clip(CircleShape)
.background(Color(0xFF232323)),
)
}
ShimmerRow(size = 1)
}
viewModel.error != null && viewModel.userRows.isEmpty() ->
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {

View file

@ -211,19 +211,12 @@ fun VideoListScreen(
// VideoListScreen (My videos, Search, Subscriptions, History, channel pages).
item(key = "initial-placeholders", span = { androidx.compose.foundation.lazy.grid.GridItemSpan(maxLineSpan) }) {
LaunchedEffect(source) { viewModel.loadMore(force = true) }
androidx.compose.foundation.layout.Column {
repeat(2) {
androidx.compose.foundation.layout.Row {
repeat(cardsPerRow) {
ShimmerCard(
modifier = Modifier
.padding(6.dp)
.width(rowCardWidth()),
)
}
}
}
}
// A single loading card, not a full fake grid (issue #31).
ShimmerCard(
modifier = Modifier
.padding(6.dp)
.width(rowCardWidth() - 12.dp),
)
}
}
itemsIndexed(items, key = { _, item -> itemStableKey(item) }) { index, item ->