Merge pull request #4080 from element-hq/feature/bma/galleryLoading

Improve gallery loading state
2024-12-20 16:40:45 +01:00 · 2024-12-20 16:40:45 +01:00 · 6eaa6d2724
commit 6eaa6d2724
parent 800d6f0999 2f7e31bdd2
15 changed files with 112 additions and 53 deletions
--- a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryState.kt
+++ b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryState.kt
@ -25,7 +25,14 @@ data class MediaGalleryState(
 data class GroupedMediaItems(
    val imageAndVideoItems: ImmutableList<MediaItem>,
    val fileItems: ImmutableList<MediaItem>,
-)
+) {
+    fun getItems(mode: MediaGalleryMode): ImmutableList<MediaItem> {
+        return when (mode) {
+            MediaGalleryMode.Images -> imageAndVideoItems
+            MediaGalleryMode.Files -> fileItems
+        }
+    }
+}

 enum class MediaGalleryMode(val stringResource: Int) {
    Images(R.string.screen_media_browser_list_mode_media),
--- a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryStateProvider.kt
+++ b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryStateProvider.kt
@ -84,6 +84,27 @@ open class MediaGalleryStateProvider : PreviewParameterProvider<MediaGalleryStat
                mode = MediaGalleryMode.Files,
                groupedMediaItems = AsyncData.Failure(Exception("Failed to load media")),
            ),
+            // Timeline is loaded but does not have relevant content yet for images and videos
+            aMediaGalleryState(
+                groupedMediaItems = AsyncData.Success(
+                    aGroupedMediaItems(
+                        imageAndVideoItems = listOf(
+                            aMediaItemLoadingIndicator(),
+                        ),
+                    )
+                )
+            ),
+            // Timeline is loaded but does not have relevant content yet for files
+            aMediaGalleryState(
+                mode = MediaGalleryMode.Files,
+                groupedMediaItems = AsyncData.Success(
+                    aGroupedMediaItems(
+                        fileItems = listOf(
+                            aMediaItemLoadingIndicator(),
+                        ),
+                    )
+                )
+            ),
        )
 }

--- a/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryView.kt
+++ b/libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/gallery/MediaGalleryView.kt
@ -196,30 +196,44 @@ private fun MediaGalleryPage(
    state: MediaGalleryState,
    onItemClick: (MediaItem.Event) -> Unit,
 ) {
-    when (val groupedMediaItems = state.groupedMediaItems) {
-        AsyncData.Uninitialized,
-        is AsyncData.Loading -> {
-            LoadingContent(mode)
-        }
-        is AsyncData.Success -> {
-            when (mode) {
-                MediaGalleryMode.Images -> MediaGalleryImages(
-                    imagesAndVideos = groupedMediaItems.data.imageAndVideoItems,
-                    eventSink = state.eventSink,
-                    onItemClick = onItemClick,
-                )
-                MediaGalleryMode.Files -> MediaGalleryFiles(
-                    files = groupedMediaItems.data.fileItems,
-                    eventSink = state.eventSink,
-                    onItemClick = onItemClick,
+    val groupedMediaItems = state.groupedMediaItems
+    if (groupedMediaItems.isLoadingItems(mode)) {
+        LoadingContent(mode)
+    } else {
+        when (groupedMediaItems) {
+            is AsyncData.Success -> {
+                when (mode) {
+                    MediaGalleryMode.Images -> MediaGalleryImages(
+                        imagesAndVideos = groupedMediaItems.data.imageAndVideoItems,
+                        eventSink = state.eventSink,
+                        onItemClick = onItemClick,
+                    )
+                    MediaGalleryMode.Files -> MediaGalleryFiles(
+                        files = groupedMediaItems.data.fileItems,
+                        eventSink = state.eventSink,
+                        onItemClick = onItemClick,
+                    )
+                }
+            }
+            is AsyncData.Failure -> {
+                ErrorContent(
+                    error = groupedMediaItems.error,
                )
            }
+            else -> Unit
        }
-        is AsyncData.Failure -> {
-            ErrorContent(
-                error = groupedMediaItems.error,
-            )
-        }
+    }
+}
+
+/**
+ * Return true when the timeline is not loaded or if it contains only a single loading item.
+ */
+private fun AsyncData<GroupedMediaItems>.isLoadingItems(mode: MediaGalleryMode): Boolean {
+    return when (this) {
+        AsyncData.Uninitialized,
+        is AsyncData.Loading -> true
+        is AsyncData.Success -> data.getItems(mode).singleOrNull() is MediaItem.LoadingIndicator
+        is AsyncData.Failure -> false
    }
 }

@ -460,23 +474,28 @@ private fun EmptyContent(
 private fun LoadingContent(
    mode: MediaGalleryMode,
 ) {
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(top = 48.dp)
-            .padding(24.dp),
-        verticalArrangement = Arrangement.spacedBy(16.dp),
-        horizontalAlignment = Alignment.CenterHorizontally,
+    Box(
+        modifier = Modifier.fillMaxSize(),
    ) {
-        CircularProgressIndicator()
-        val res = when (mode) {
-            MediaGalleryMode.Images -> R.string.screen_media_browser_list_loading_media
-            MediaGalleryMode.Files -> R.string.screen_media_browser_list_loading_files
+        OnboardingBackground()
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(top = 48.dp)
+                .padding(24.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            CircularProgressIndicator()
+            val res = when (mode) {
+                MediaGalleryMode.Images -> R.string.screen_media_browser_list_loading_media
+                MediaGalleryMode.Files -> R.string.screen_media_browser_list_loading_files
+            }
+            Text(
+                text = stringResource(res),
+                modifier = Modifier.align(Alignment.CenterHorizontally),
+            )
        }
-        Text(
-            text = stringResource(res),
-            modifier = Modifier.align(Alignment.CenterHorizontally),
-        )
    }
 }

--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8b04072b9e16342e333c2a10e6462420216b4192226c97f0d4bd5b5ada1aecef
-size 18791
+oid sha256:3924189c91a3e5af84f01365c4e147540882aa58478a8d1f2df180ecf6d7c9c8
+size 62580
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_11_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_11_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c3e033d714925e3f49101232f07dc074306a02a0982751c27b9632cded807805
+size 59633
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_12_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_12_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:25931181788559de18663b0a8f52cad47dabb94b8fcba13deac18605404df8ac
+size 59331
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1853de49049bcd1448cc4e7c4a38ed8ab3cf11c3d11b1ddf296f2b6a37e985b4
-size 15428
+oid sha256:c3e033d714925e3f49101232f07dc074306a02a0982751c27b9632cded807805
+size 59633
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_4_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_4_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7d1cdeba30c6efca096c3625613ce5ad33b6f09e08eb09b2758d9a039e4206fb
-size 15106
+oid sha256:25931181788559de18663b0a8f52cad47dabb94b8fcba13deac18605404df8ac
+size 59331
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_5_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Day_5_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7d1cdeba30c6efca096c3625613ce5ad33b6f09e08eb09b2758d9a039e4206fb
-size 15106
+oid sha256:25931181788559de18663b0a8f52cad47dabb94b8fcba13deac18605404df8ac
+size 59331
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f9d7fecddc7aff63c795dcad68665dc1771544f5facda5a838b1f3391655ee49
-size 18306
+oid sha256:d6fcc983290fe807c5a77220306db0ce71d6f6135e06a2e9e36bebae36b8adda
+size 54797
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_11_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_11_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2484c3e0a0520fda13fa306ec6fa4c3d1cb7a8c19f516c49a3e4807d51ce48e0
+size 51830
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_12_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_12_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3b4ac6027a2ba0cc88e8843b5d0a21ffdc1dd51397b277b914da13a4d73e30b5
+size 51412
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:739e2618bac9233b0ff7335d734d7fb594e3ee8860f9e61ef80d2dc4d7736a27
-size 15026
+oid sha256:2484c3e0a0520fda13fa306ec6fa4c3d1cb7a8c19f516c49a3e4807d51ce48e0
+size 51830
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_4_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_4_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8be4c40bcec9cb84bd087dc395be694b614f88ff5b44a33dafc3ad87576d23c6
-size 14578
+oid sha256:3b4ac6027a2ba0cc88e8843b5d0a21ffdc1dd51397b277b914da13a4d73e30b5
+size 51412
--- a/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_5_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.mediaviewer.impl.gallery_MediaGalleryView_Night_5_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8be4c40bcec9cb84bd087dc395be694b614f88ff5b44a33dafc3ad87576d23c6
-size 14578
+oid sha256:3b4ac6027a2ba0cc88e8843b5d0a21ffdc1dd51397b277b914da13a4d73e30b5
+size 51412