diff --git a/app/src/main/kotlin/ir/thatsmejavad/backgroundable/screens/collectionlist/CollectionListScreen.kt b/app/src/main/kotlin/ir/thatsmejavad/backgroundable/screens/collectionlist/CollectionListScreen.kt index 567ef03..00e930a 100644 --- a/app/src/main/kotlin/ir/thatsmejavad/backgroundable/screens/collectionlist/CollectionListScreen.kt +++ b/app/src/main/kotlin/ir/thatsmejavad/backgroundable/screens/collectionlist/CollectionListScreen.kt @@ -1,5 +1,6 @@ package ir.thatsmejavad.backgroundable.screens.collectionlist +import androidx.compose.animation.AnimatedVisibility import androidx.compose.foundation.background import androidx.compose.foundation.basicMarquee import androidx.compose.foundation.interaction.MutableInteractionSource @@ -24,6 +25,7 @@ import androidx.compose.material3.ElevatedButton import androidx.compose.material3.ElevatedCard import androidx.compose.material3.Icon import androidx.compose.material3.IconButton +import androidx.compose.material3.LinearProgressIndicator import androidx.compose.material3.MaterialTheme import androidx.compose.material3.SnackbarHostState import androidx.compose.material3.Text @@ -155,59 +157,64 @@ private fun CollectionListScreen( onSwipe = { collections.refresh() }, isRefreshing = collections.loadState.refresh is LoadState.Loading ) { - LazyVerticalGrid( - modifier = Modifier - .padding(horizontal = 8.dp) - .fillMaxSize(), - columns = GridCells.Fixed(columnCounts), - state = rememberLazyGridState(), - verticalArrangement = Arrangement.spacedBy(8.dp), - horizontalArrangement = Arrangement.spacedBy(8.dp), - /* - The padding of the bottomBar, - can't use Scaffold to add bottomBar with animation. - the bottom of the ui will jump - */ - contentPadding = PaddingValues(bottom = NAVIGATION_BAR_HEIGHT) - ) { - items( - count = collections.itemCount, - key = collections.itemKey(), - contentType = collections.itemContentType() - ) { index -> - collections[index]?.let { collection -> - CollectionCard( - isVertical = columnCounts > 2, - collection = collection, - onCollectionClicked = onCollectionClicked - ) - } + Column(modifier = Modifier.fillMaxSize()) { + AnimatedVisibility(collections.loadState.refresh is LoadState.Loading) { + LinearProgressIndicator(modifier = Modifier.fillMaxWidth()) } + LazyVerticalGrid( + modifier = Modifier + .padding(horizontal = 8.dp) + .fillMaxSize(), + columns = GridCells.Fixed(columnCounts), + state = rememberLazyGridState(), + verticalArrangement = Arrangement.spacedBy(8.dp), + horizontalArrangement = Arrangement.spacedBy(8.dp), + /* + The padding of the bottomBar, + can't use Scaffold to add bottomBar with animation. + the bottom of the ui will jump + */ + contentPadding = PaddingValues(bottom = NAVIGATION_BAR_HEIGHT) + ) { + items( + count = collections.itemCount, + key = collections.itemKey(), + contentType = collections.itemContentType() + ) { index -> + collections[index]?.let { collection -> + CollectionCard( + isVertical = columnCounts > 2, + collection = collection, + onCollectionClicked = onCollectionClicked + ) + } + } - when (val paginationLoadState = collections.loadState.append) { - is LoadState.Error -> { - if (!paginationLoadState.endOfPaginationReached) { - item { - Box(Modifier.fillMaxSize()) { - Text( - modifier = Modifier.align(Alignment.Center), - text = paginationLoadState.error.getErrorMessage() - .asString() - ) + when (val paginationLoadState = collections.loadState.append) { + is LoadState.Error -> { + if (!paginationLoadState.endOfPaginationReached) { + item { + Box(Modifier.fillMaxSize()) { + Text( + modifier = Modifier.align(Alignment.Center), + text = paginationLoadState.error.getErrorMessage() + .asString() + ) + } } } } - } - is LoadState.Loading -> { - item { - Box(Modifier.fillMaxSize()) { - CircularProgressIndicator(modifier = Modifier.align(Alignment.Center)) + is LoadState.Loading -> { + item { + Box(Modifier.fillMaxSize()) { + CircularProgressIndicator(modifier = Modifier.align(Alignment.Center)) + } } } - } - else -> {} + else -> {} + } } } diff --git a/app/src/main/kotlin/ir/thatsmejavad/backgroundable/screens/medialist/MediaListScreen.kt b/app/src/main/kotlin/ir/thatsmejavad/backgroundable/screens/medialist/MediaListScreen.kt index 7fb2997..914d871 100644 --- a/app/src/main/kotlin/ir/thatsmejavad/backgroundable/screens/medialist/MediaListScreen.kt +++ b/app/src/main/kotlin/ir/thatsmejavad/backgroundable/screens/medialist/MediaListScreen.kt @@ -1,6 +1,7 @@ package ir.thatsmejavad.backgroundable.screens.medialist import androidx.compose.animation.AnimatedContent +import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.core.tween import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut @@ -14,6 +15,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.grid.GridCells @@ -27,6 +29,7 @@ import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.ElevatedButton import androidx.compose.material3.Icon import androidx.compose.material3.IconButton +import androidx.compose.material3.LinearProgressIndicator import androidx.compose.material3.MaterialTheme import androidx.compose.material3.SnackbarHostState import androidx.compose.material3.Text @@ -161,7 +164,7 @@ private fun MediaListScreen( BoxWithSwipeRefresh( modifier = Modifier.padding(paddingValues), onSwipe = { medias.refresh() }, - isRefreshing = medias.loadState.refresh is LoadState.Loading + isRefreshing = refreshLoadState is LoadState.Loading ) { AnimatedContent( targetState = columnType, @@ -181,139 +184,144 @@ private fun MediaListScreen( .togetherWith(fadeOut(animationSpec = tween(120))) } ) { type -> - if (type == List.StaggeredType) { - LazyVerticalStaggeredGrid( - modifier = Modifier - .padding(horizontal = 16.dp) - .fillMaxSize(), - columns = StaggeredGridCells.Fixed(2), - verticalItemSpacing = 12.dp, - horizontalArrangement = Arrangement.spacedBy(8.dp), - contentPadding = PaddingValues(top = 16.dp) - ) { - items( - count = medias.itemCount, - key = medias.itemKey { it.media.id }, - contentType = medias.itemContentType() - ) { index -> - medias[index]?.let { media -> - MediaCard( - alt = media.media.alt, - aspectRatio = media.media.width / media.media.height.toFloat(), - avgColor = media.media.avgColor, - photographer = media.media.photographer, - resourceUrl = media.resources.first { - it.size == imageQuality.toResourceSize() - }.url, - onMediaClicked = { - navigateTo( - AppScreens.MediaDetail.createRoute( - media.media.id, - media.media.alt + Column(modifier = Modifier.fillMaxSize()) { + AnimatedVisibility(refreshLoadState is LoadState.Loading) { + LinearProgressIndicator(modifier = Modifier.fillMaxWidth()) + } + if (type == List.StaggeredType) { + LazyVerticalStaggeredGrid( + modifier = Modifier + .padding(horizontal = 16.dp) + .fillMaxSize(), + columns = StaggeredGridCells.Fixed(2), + verticalItemSpacing = 12.dp, + horizontalArrangement = Arrangement.spacedBy(8.dp), + contentPadding = PaddingValues(top = 16.dp) + ) { + items( + count = medias.itemCount, + key = medias.itemKey { it.media.id }, + contentType = medias.itemContentType() + ) { index -> + medias[index]?.let { media -> + MediaCard( + alt = media.media.alt, + aspectRatio = media.media.width / media.media.height.toFloat(), + avgColor = media.media.avgColor, + photographer = media.media.photographer, + resourceUrl = media.resources.first { + it.size == imageQuality.toResourceSize() + }.url, + onMediaClicked = { + navigateTo( + AppScreens.MediaDetail.createRoute( + media.media.id, + media.media.alt + ) ) - ) - } - ) + } + ) + } } - } - when (val paginationLoadState = medias.loadState.append) { - is LoadState.Error -> { - if (!paginationLoadState.endOfPaginationReached) { + when (val paginationLoadState = medias.loadState.append) { + is LoadState.Error -> { + if (!paginationLoadState.endOfPaginationReached) { + item { + Box(Modifier.fillMaxSize()) { + Text( + modifier = Modifier.align(Alignment.Center), + text = paginationLoadState.error.getErrorMessage() + .asString() + ) + } + } + } + } + + is LoadState.Loading -> { item { Box(Modifier.fillMaxSize()) { - Text( - modifier = Modifier.align(Alignment.Center), - text = paginationLoadState.error.getErrorMessage() - .asString() + CircularProgressIndicator( + modifier = Modifier.align( + Alignment.Center + ) ) } } } - } - is LoadState.Loading -> { - item { - Box(Modifier.fillMaxSize()) { - CircularProgressIndicator( - modifier = Modifier.align( - Alignment.Center + else -> {} + } + } + } else { + LazyVerticalGrid( + modifier = Modifier + .padding(horizontal = 16.dp) + .fillMaxSize(), + columns = GridCells.Fixed( + if (type == List.ListType) 1 else 2 + ), + verticalArrangement = Arrangement.spacedBy(12.dp), + horizontalArrangement = Arrangement.spacedBy(8.dp), + contentPadding = PaddingValues(top = 16.dp) + ) { + items( + count = medias.itemCount, + key = medias.itemKey { it.media.id }, + contentType = medias.itemContentType() + ) { index -> + medias[index]?.let { media -> + MediaCard( + alt = media.media.alt, + avgColor = media.media.avgColor, + isSingleColumn = columnType == List.ListType, + photographer = media.media.photographer, + resourceUrl = media + .resources + .first { it.size == imageQuality.toResourceSize() } + .url, + onMediaClicked = { + navigateTo( + AppScreens.MediaDetail.createRoute( + media.media.id, + media.media.alt + ) ) - ) - } + } + ) } } - else -> {} - } - } - } else { - LazyVerticalGrid( - modifier = Modifier - .padding(horizontal = 16.dp) - .fillMaxSize(), - columns = GridCells.Fixed( - if (type == List.ListType) 1 else 2 - ), - verticalArrangement = Arrangement.spacedBy(12.dp), - horizontalArrangement = Arrangement.spacedBy(8.dp), - contentPadding = PaddingValues(top = 16.dp) - ) { - items( - count = medias.itemCount, - key = medias.itemKey { it.media.id }, - contentType = medias.itemContentType() - ) { index -> - medias[index]?.let { media -> - MediaCard( - alt = media.media.alt, - avgColor = media.media.avgColor, - isSingleColumn = columnType == List.ListType, - photographer = media.media.photographer, - resourceUrl = media - .resources - .first { it.size == imageQuality.toResourceSize() } - .url, - onMediaClicked = { - navigateTo( - AppScreens.MediaDetail.createRoute( - media.media.id, - media.media.alt - ) - ) + when (val paginationLoadState = medias.loadState.append) { + is LoadState.Error -> { + if (!paginationLoadState.endOfPaginationReached) { + item { + Box(Modifier.fillMaxSize()) { + Text( + modifier = Modifier.align(Alignment.Center), + text = paginationLoadState.error.getErrorMessage() + .asString() + ) + } + } } - ) - } - } + } - when (val paginationLoadState = medias.loadState.append) { - is LoadState.Error -> { - if (!paginationLoadState.endOfPaginationReached) { + is LoadState.Loading -> { item { Box(Modifier.fillMaxSize()) { - Text( - modifier = Modifier.align(Alignment.Center), - text = paginationLoadState.error.getErrorMessage() - .asString() + CircularProgressIndicator( + modifier = Modifier.align( + Alignment.Center + ) ) } } } - } - is LoadState.Loading -> { - item { - Box(Modifier.fillMaxSize()) { - CircularProgressIndicator( - modifier = Modifier.align( - Alignment.Center - ) - ) - } - } + else -> {} } - - else -> {} } } }