Add Bookmarks Loading and Error states (#1595)

yschimke · web-flow · commit c1781db1f6a6 · 2025-04-09T11:50:53.000+03:00
* Add Previews for Bookmarks Loading and Error states

This commit adds previews for loading and error states to the Bookmarks screen.

Those UIs don't currently exist.

* Fixes

* Add placeholders

* Fix placeholders

* Fix

* Fix Home Screen placeholder usage

* Add tests

* Add tests
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksEmpty[GenericLargeRound].png b/wearApp/snapshot/BookmarksTest/bookmarksEmpty[GenericLargeRound].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d1fb70ab06bc06c5ac0cd7e56c37597e281adbce62e114ecd982012d567c1b30
+size 28401
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksEmpty[GenericSmallRound].png b/wearApp/snapshot/BookmarksTest/bookmarksEmpty[GenericSmallRound].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b3a426cc8fbd081670159c9416708f6235ef386d9d60c40870efec1e75eda5e9
+size 25005
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksEmpty[GooglePixelWatchLargeFont].png b/wearApp/snapshot/BookmarksTest/bookmarksEmpty[GooglePixelWatchLargeFont].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ca35041f4479673a8ddcd6120cc562b49221f01936d7185274d26355bae89541
+size 23377
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksEmpty[GooglePixelWatch].png b/wearApp/snapshot/BookmarksTest/bookmarksEmpty[GooglePixelWatch].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b3a426cc8fbd081670159c9416708f6235ef386d9d60c40870efec1e75eda5e9
+size 25005
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksEmpty[MobvoiTicWatchPro5].png b/wearApp/snapshot/BookmarksTest/bookmarksEmpty[MobvoiTicWatchPro5].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:12196209a8c48804b6fcd1764adebc19f39b5d728f72d61b68cc5988c5b2cc23
+size 28675
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksEmpty[SamsungGalaxyWatch5].png b/wearApp/snapshot/BookmarksTest/bookmarksEmpty[SamsungGalaxyWatch5].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e285f11bdb96e5e6299be014dfc271225dac4d978ff20c8a13f81e0b65ae56c5
+size 29523
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksEmpty[SamsungGalaxyWatch6SmallFont].png b/wearApp/snapshot/BookmarksTest/bookmarksEmpty[SamsungGalaxyWatch6SmallFont].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:39da5f7c417fc5cb2485001900db32a7b25a0cfc242dc69c55e5da06e7aecdb2
+size 26579
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksEmpty[SamsungGalaxyWatch6].png b/wearApp/snapshot/BookmarksTest/bookmarksEmpty[SamsungGalaxyWatch6].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4e1321dafe02723134755fce9348c6b59592a1cacbd689f152c019b10c9cfd76
+size 28346
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksError[GenericLargeRound].png b/wearApp/snapshot/BookmarksTest/bookmarksError[GenericLargeRound].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d308c5c94610958ab505e30c2e45cfbd9f950881f2d0d0ad23dbbc41423723b1
+size 19612
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksError[GenericSmallRound].png b/wearApp/snapshot/BookmarksTest/bookmarksError[GenericSmallRound].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8bfc3be000506987382060ae7faad74f623cb487475383356240867242b2b442
+size 15554
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksError[GooglePixelWatchLargeFont].png b/wearApp/snapshot/BookmarksTest/bookmarksError[GooglePixelWatchLargeFont].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e3cd251c7202e3e47e02ee98d7ea6921a54f6fe11dd94b1ee245e4a7d2a0cadc
+size 16933
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksError[GooglePixelWatch].png b/wearApp/snapshot/BookmarksTest/bookmarksError[GooglePixelWatch].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8bfc3be000506987382060ae7faad74f623cb487475383356240867242b2b442
+size 15554
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksError[MobvoiTicWatchPro5].png b/wearApp/snapshot/BookmarksTest/bookmarksError[MobvoiTicWatchPro5].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:75a2157137638fa88a64f0a73e5a945f44152d50d8c3751b83eda1e1bacd6018
+size 19754
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksError[SamsungGalaxyWatch5].png b/wearApp/snapshot/BookmarksTest/bookmarksError[SamsungGalaxyWatch5].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:155e035dd30f09f08d79da90ff9d5a237bf5c909f2836c013f1fbc80283e6cbc
+size 18564
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksError[SamsungGalaxyWatch6SmallFont].png b/wearApp/snapshot/BookmarksTest/bookmarksError[SamsungGalaxyWatch6SmallFont].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fd53808c87979419969b80bf2f24aae57b93fd3e1b54648c96e992063f8d599e
+size 18823
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksError[SamsungGalaxyWatch6].png b/wearApp/snapshot/BookmarksTest/bookmarksError[SamsungGalaxyWatch6].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:89041212b671a68575164d524c93ac16d5cf77202515fb47645c0d4684f4d3bb
+size 19568
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksLoading[GenericLargeRound].png b/wearApp/snapshot/BookmarksTest/bookmarksLoading[GenericLargeRound].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e9a80cd6e82bd8bba99febdc9fdc1682c703a036afacc2aaa009a8e20a1dbc31
+size 22567
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksLoading[GenericSmallRound].png b/wearApp/snapshot/BookmarksTest/bookmarksLoading[GenericSmallRound].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:57e78fac7580cf7c380f00b31a6eaac094149becab1d25f60dcbfd97abee5485
+size 16579
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksLoading[GooglePixelWatchLargeFont].png b/wearApp/snapshot/BookmarksTest/bookmarksLoading[GooglePixelWatchLargeFont].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fce1ec046dca5443c8d57dd83f643a45e9d22cd0f8eb58029a5c04e689506fe8
+size 17711
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksLoading[GooglePixelWatch].png b/wearApp/snapshot/BookmarksTest/bookmarksLoading[GooglePixelWatch].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:57e78fac7580cf7c380f00b31a6eaac094149becab1d25f60dcbfd97abee5485
+size 16579
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksLoading[MobvoiTicWatchPro5].png b/wearApp/snapshot/BookmarksTest/bookmarksLoading[MobvoiTicWatchPro5].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7a0fa5c27c8a47097f33f293748cd8e9f519305304075256b7fe3b3f67ec0cca
+size 22953
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksLoading[SamsungGalaxyWatch5].png b/wearApp/snapshot/BookmarksTest/bookmarksLoading[SamsungGalaxyWatch5].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2ef880e923ece5dd01f8ea21bdc5b44e18a3495e53d02edfd17fa591c60bbe69
+size 20255
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksLoading[SamsungGalaxyWatch6SmallFont].png b/wearApp/snapshot/BookmarksTest/bookmarksLoading[SamsungGalaxyWatch6SmallFont].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ccd60de157759f1ca21ff456cc7df0a4757e90da0eb1fa6d306a56ba15bfc7b9
+size 21957
diff --git a/wearApp/snapshot/BookmarksTest/bookmarksLoading[SamsungGalaxyWatch6].png b/wearApp/snapshot/BookmarksTest/bookmarksLoading[SamsungGalaxyWatch6].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6d0805faa5f475089c0bb19f6e381b25e4fc1c1f85ad845e905a494048d8a599
+size 22475
diff --git a/wearApp/src/main/java/dev/johnoreilly/confetti/wear/bookmarks/BookmarksComponent.kt b/wearApp/src/main/java/dev/johnoreilly/confetti/wear/bookmarks/BookmarksComponent.kt
@@ -39,7 +39,7 @@ class DefaultBookmarksComponent(
     private val complicationUpdater: ComplicationUpdater by inject()
 
     override val uiState: StateFlow<QueryResult<BookmarksUiState>> =
-        repository.bookmarkedSessionsQuery(conference, user?.uid, user, FetchPolicy.CacheAndNetwork)
+        repository.bookmarkedSessionsQuery(conference, user?.uid, user, FetchPolicy.NetworkFirst)
             .toUiState {
                 it.toUiState()
             }.onEach {
diff --git a/wearApp/src/main/java/dev/johnoreilly/confetti/wear/bookmarks/BookmarksScreen.kt b/wearApp/src/main/java/dev/johnoreilly/confetti/wear/bookmarks/BookmarksScreen.kt
@@ -8,8 +8,10 @@ import androidx.compose.ui.res.stringResource
 import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
 import androidx.wear.compose.foundation.lazy.items
 import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
+import androidx.wear.compose.material3.MaterialTheme
 import androidx.wear.compose.material3.ScreenScaffold
 import androidx.wear.compose.material3.Text
+import androidx.wear.compose.material3.rememberPlaceholderState
 import androidx.wear.compose.ui.tooling.preview.WearPreviewDevices
 import androidx.wear.compose.ui.tooling.preview.WearPreviewFontScales
 import com.google.android.horologist.compose.layout.ColumnItemType
@@ -36,85 +38,100 @@ fun BookmarksScreen(
     val columnState = rememberTransformingLazyColumnState()
 
     val columnPadding = rememberResponsiveColumnPadding(
-        first = ColumnItemType.ListHeader,
-        last = ColumnItemType.Card
+        first = ColumnItemType.ListHeader, last = ColumnItemType.Card
     )
+    val placeholderState = rememberPlaceholderState { uiState !is QueryResult.Loading }
     ScreenScaffold(modifier = modifier, scrollState = columnState, contentPadding = columnPadding) { contentPadding ->
         TransformingLazyColumn(
             modifier = Modifier.fillMaxSize(),
             state = columnState,
             contentPadding = contentPadding,
         ) {
             when (uiState) {
-                is QueryResult.Success -> {
+                is QueryResult.Success, QueryResult.Loading -> {
                     item {
                         ScreenHeader(
                             text = stringResource(R.string.upcoming_sessions)
                         )
                     }
 
-                    items(uiState.result.upcoming) { session ->
+                    val upcoming = (uiState as? QueryResult.Success)?.result?.upcoming
+                    val now = (uiState as? QueryResult.Success)?.result?.now
+                    val itemCount = upcoming?.size ?: 2
+
+                    items(itemCount) {
+                        val session = upcoming?.get(it)
                         SessionCard(
-                            modifier = Modifier
-                                .fillMaxWidth(),
                             session = session,
                             sessionSelected = {
                                 sessionSelected(it)
                             },
-                            currentTime = uiState.result.now,
+                            currentTime = now,
                             isBookmarked = true,
                             addBookmark = addBookmark,
-                            removeBookmark = removeBookmark
+                            removeBookmark = removeBookmark,
+                            modifier = Modifier.fillMaxWidth(),
+                            placeholderState = placeholderState,
                         )
                     }
 
-                    if (!uiState.result.hasUpcomingBookmarks) {
+                    if ((uiState as? QueryResult.Success)?.result?.hasUpcomingBookmarks == false) {
                         item {
                             Text(
-                                modifier = Modifier
-                                    .fillMaxWidth(),
+                                modifier = Modifier.fillMaxWidth(),
                                 text = stringResource(id = R.string.no_upcoming),
                             )
                         }
                     }
 
                     item {
                         SectionHeader(
-                            modifier = Modifier
-                                .fillMaxWidth(),
-                            text = stringResource(id = R.string.past_sessions)
-                        )
-                    }
-
-                    items(uiState.result.past) { session ->
-                        SessionCard(
-                            modifier = Modifier
-                                .fillMaxWidth(),
-                            session = session,
-                            sessionSelected = {
-                                sessionSelected(it)
-                            },
-                            currentTime = uiState.result.now,
-                            isBookmarked = true,
-                            addBookmark = {},
-                            removeBookmark = {}
+                            modifier = Modifier.fillMaxWidth(), text = stringResource(id = R.string.past_sessions)
                         )
                     }
 
-                    if (uiState.result.past.isEmpty()) {
-                        item {
-                            Text(
-                                modifier = Modifier
-                                    .fillMaxWidth(),
-                                text = stringResource(id = R.string.no_past),
+                    if (uiState is QueryResult.Success) {
+                        items(uiState.result.past) { session ->
+                            SessionCard(
+                                session = session,
+                                sessionSelected = {
+                                    sessionSelected(it)
+                                },
+                                currentTime = uiState.result.now,
+                                isBookmarked = true,
+                                addBookmark = {},
+                                removeBookmark = {},
+                                modifier = Modifier.fillMaxWidth(),
                             )
                         }
+
+                        if (uiState.result.past.isEmpty()) {
+                            item {
+                                Text(
+                                    modifier = Modifier.fillMaxWidth(),
+                                    text = stringResource(id = R.string.no_past),
+                                )
+                            }
+                        }
                     }
                 }
 
-                else -> {
-                    // TODO
+                is QueryResult.Error -> {
+                    item {
+                        ScreenHeader(
+                            text = stringResource(R.string.upcoming_sessions)
+                        )
+                    }
+                    item {
+                        Text(
+                            modifier = Modifier.fillMaxWidth(),
+                            text = uiState.exception.message ?: "Unknown Error Occurred",
+                            color = MaterialTheme.colorScheme.errorDim
+                        )
+                    }
                 }
+
+                else -> {}
             }
         }
     }
@@ -133,10 +150,60 @@ fun BookmarksPreview() {
                     past = listOf(),
                     now = LocalDateTime.of(2022, 1, 1, 1, 1).toKotlinLocalDateTime()
                 )
-            ),
+            ), sessionSelected = {}, addBookmark = {}, removeBookmark = {})
+    }
+}
+
+@WearPreviewDevices
+@WearPreviewFontScales
+@Composable
+fun BookmarksPreviewLoading() {
+    ConfettiThemeFixed {
+        BookmarksScreen(uiState = QueryResult.Loading, sessionSelected = {}, addBookmark = {}, removeBookmark = {})
+    }
+}
+
+@WearPreviewDevices
+@WearPreviewFontScales
+@Composable
+fun BookmarksPreviewError() {
+    ConfettiThemeFixed {
+        BookmarksScreen(
+            uiState = QueryResult.Error(Exception("Boom")),
+            sessionSelected = {},
+            addBookmark = {},
+            removeBookmark = {})
+    }
+}
+
+@WearPreviewDevices
+@WearPreviewFontScales
+@Composable
+fun BookmarksPreviewErrorLong() {
+    ConfettiThemeFixed {
+        BookmarksScreen(
+            uiState = QueryResult.Error(Exception("Boom: This is a long error message for testing purposes and to ensure it will be cropped correctly.")),
             sessionSelected = {},
             addBookmark = {},
-            removeBookmark = {}
-        )
+            removeBookmark = {})
     }
 }
+
+
+@WearPreviewDevices
+@WearPreviewFontScales
+@Composable
+fun BookmarksPreviewEmpty() {
+    ConfettiThemeFixed {
+        BookmarksScreen(
+            uiState = QueryResult.Success(
+                BookmarksUiState(
+                    conference = TestFixtures.kotlinConf2023.id,
+                    upcoming = listOf(),
+                    past = listOf(),
+                    now = LocalDateTime.of(2022, 1, 1, 1, 1).toKotlinLocalDateTime()
+                )
+            ), sessionSelected = {}, addBookmark = {}, removeBookmark = {})
+    }
+}
+
diff --git a/wearApp/src/main/java/dev/johnoreilly/confetti/wear/components/SessionCard.kt b/wearApp/src/main/java/dev/johnoreilly/confetti/wear/components/SessionCard.kt
diff --git a/wearApp/src/main/java/dev/johnoreilly/confetti/wear/home/HomeScreen.kt b/wearApp/src/main/java/dev/johnoreilly/confetti/wear/home/HomeScreen.kt
diff --git a/wearApp/src/test/kotlin/dev/johnoreilly/confetti/wear/BookmarksTest.kt b/wearApp/src/test/kotlin/dev/johnoreilly/confetti/wear/BookmarksTest.kt
