feat(android.NearbyTransitView): Shimmer loading (#631)

mbta · Jan 9, 2025 · ca565ac · ca565ac
1 parent fcca221
commit ca565ac
Show file tree

Hide file tree

Showing 12 changed files with 179 additions and 85 deletions.
diff --git a/androidApp/build.gradle.kts b/androidApp/build.gradle.kts
@@ -71,6 +71,8 @@ dependencies {
     implementation(libs.androidx.activity.compose)
     implementation(libs.androidx.navigation.compose)
     implementation(libs.compose.material3)
+    implementation(libs.compose.placeholder.material3)
+    implementation(libs.compose.shimmer)
     implementation(libs.compose.ui)
     implementation(libs.compose.ui.tooling.preview)
     implementation(libs.javaPhoenixClient)

diff --git a/...src/androidTest/java/com/mbta/tid/mbta_app/android/nearbyTransit/NearbyTransitPageTest.kt b/...src/androidTest/java/com/mbta/tid/mbta_app/android/nearbyTransit/NearbyTransitPageTest.kt
@@ -12,7 +12,7 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.semantics.SemanticsActions
 import androidx.compose.ui.test.ExperimentalTestApi
 import androidx.compose.ui.test.assertIsDisplayed
-import androidx.compose.ui.test.hasText
+import androidx.compose.ui.test.hasContentDescription
 import androidx.compose.ui.test.junit4.createComposeRule
 import androidx.compose.ui.test.onNodeWithContentDescription
 import androidx.compose.ui.test.onNodeWithText
@@ -315,7 +315,7 @@ class NearbyTransitPageTest : KoinTest {
         }
 
         composeTestRule.onNodeWithContentDescription("Mapbox Logo").assertIsDisplayed()
-        composeTestRule.waitUntilDoesNotExist(hasText("Loading..."))
+        composeTestRule.waitUntilDoesNotExist(hasContentDescription("Loading..."))
         composeTestRule
             .onNodeWithContentDescription("Drag handle")
             .performSemanticsAction(SemanticsActions.Expand)
@@ -404,7 +404,7 @@ class NearbyTransitPageTest : KoinTest {
             }
         }
 
-        composeTestRule.waitUntilDoesNotExist(hasText("Loading..."))
+        composeTestRule.waitUntilDoesNotExist(hasContentDescription("Loading...", substring = true))
 
         composeTestRule.waitUntil { mockMapVM.loadConfigCalledCount == 1 }
         mockMapVM.mutableLastErrorTimestamp.value = Clock.System.now()

diff --git a/androidApp/src/main/java/com/mbta/tid/mbta_app/android/component/HeadsignRowView.kt b/androidApp/src/main/java/com/mbta/tid/mbta_app/android/component/HeadsignRowView.kt
@@ -8,6 +8,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import com.mbta.tid.mbta_app.android.MyApplicationTheme
+import com.mbta.tid.mbta_app.android.util.placeholderIfLoading
 import com.mbta.tid.mbta_app.model.Alert
 import com.mbta.tid.mbta_app.model.ObjectCollectionBuilder.Single.alert
 import com.mbta.tid.mbta_app.model.ObjectCollectionBuilder.Single.route
@@ -30,7 +31,8 @@ fun HeadsignRowView(
         Text(
             headsign,
             style = MaterialTheme.typography.headlineMedium,
-            fontWeight = FontWeight.Bold
+            fontWeight = FontWeight.Bold,
+            modifier = Modifier.placeholderIfLoading()
         )
     }
 }

diff --git a/androidApp/src/main/java/com/mbta/tid/mbta_app/android/component/LoadingRouteCard.kt b/androidApp/src/main/java/com/mbta/tid/mbta_app/android/component/LoadingRouteCard.kt
@@ -0,0 +1,26 @@
+package com.mbta.tid.mbta_app.android.component
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import com.mbta.tid.mbta_app.android.R
+import com.mbta.tid.mbta_app.android.nearbyTransit.NearbyRouteView
+import com.mbta.tid.mbta_app.model.LoadingPlaceholders
+import com.valentinilk.shimmer.shimmer
+import kotlinx.datetime.Clock
+
+@Composable
+fun LoadingRouteCard() {
+    val placeholderRouteData = LoadingPlaceholders.nearbyRoute()
+
+    val contentDesc = stringResource(R.string.loading)
+
+    Column(
+        modifier = Modifier.shimmer().clearAndSetSemantics { contentDescription = contentDesc }
+    ) {
+        NearbyRouteView(placeholderRouteData, false, {}, Clock.System.now(), { _, _ -> })
+    }
+}
diff --git a/androidApp/src/main/java/com/mbta/tid/mbta_app/android/component/PinButton.kt b/androidApp/src/main/java/com/mbta/tid/mbta_app/android/component/PinButton.kt
@@ -11,6 +11,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.mbta.tid.mbta_app.android.R
+import com.mbta.tid.mbta_app.android.util.placeholderIfLoading
 
 @Composable
 fun PinButton(pinned: Boolean, color: Color, action: () -> Unit) {
@@ -34,7 +35,7 @@ fun PinButton(pinned: Boolean, color: Color, action: () -> Unit) {
                         else R.drawable.pinned_route_inactive
                 ),
             contentDescription = stringResource(R.string.star_route),
-            modifier = Modifier.size(20.dp),
+            modifier = Modifier.size(20.dp).placeholderIfLoading(),
             tint = color
         )
     }

diff --git a/androidApp/src/main/java/com/mbta/tid/mbta_app/android/component/PredictionRowView.kt b/androidApp/src/main/java/com/mbta/tid/mbta_app/android/component/PredictionRowView.kt
@@ -15,12 +15,12 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.mbta.tid.mbta_app.android.R
 import com.mbta.tid.mbta_app.android.generated.drawableByName
+import com.mbta.tid.mbta_app.android.util.placeholderIfLoading
 import com.mbta.tid.mbta_app.model.RealtimePatterns
 import com.mbta.tid.mbta_app.model.Route
 
@@ -37,7 +37,6 @@ fun PredictionRowView(
     pillDecoration: PillDecoration? = null,
     destination: @Composable () -> Unit
 ) {
-    val context = LocalContext.current
     Row(
         modifier
             .fillMaxWidth()
@@ -50,7 +49,8 @@ fun PredictionRowView(
         predictions.secondaryAlert?.let { secondaryAlert ->
             Image(
                 painterResource(drawableByName(secondaryAlert.iconName)),
-                stringResource(R.string.alert)
+                stringResource(R.string.alert),
+                modifier = Modifier.placeholderIfLoading()
             )
         }
         if (pillDecoration is PillDecoration.OnRow) {

diff --git a/androidApp/src/main/java/com/mbta/tid/mbta_app/android/component/TransitHeader.kt b/androidApp/src/main/java/com/mbta/tid/mbta_app/android/component/TransitHeader.kt
@@ -22,6 +22,7 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.mbta.tid.mbta_app.android.util.placeholderIfLoading
 
 @Composable
 fun TransitHeader(
@@ -41,12 +42,17 @@ fun TransitHeader(
             modifier = Modifier.padding(horizontal = 8.dp, vertical = 10.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
-            Icon(modeIcon, contentDescription = modeDescription, tint = textColor)
+            Icon(
+                modeIcon,
+                contentDescription = modeDescription,
+                tint = textColor,
+                modifier = Modifier.placeholderIfLoading()
+            )
             Spacer(modifier = Modifier.width(8.dp))
             Text(
                 text = name,
                 maxLines = 1,
-                modifier = Modifier.semantics { heading() },
+                modifier = Modifier.semantics { heading() }.placeholderIfLoading(),
                 style =
                     LocalTextStyle.current.copy(
                         color = textColor,