Fix BpkAppSearchModal animation (#1760)

* Fix BpkAppSearchModal animation * expose state * add shimmer effect to loading skeletons --------- Co-authored-by: Vitaliy Babichev <[email protected]>
Skyscanner · Oct 13, 2023 · 1c05909 · 1c05909
1 parent 9d05ccf
commit 1c05909
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/...mpose/src/main/kotlin/net/skyscanner/backpack/compose/appsearchmodal/BpkAppSearchModal.kt b/...mpose/src/main/kotlin/net/skyscanner/backpack/compose/appsearchmodal/BpkAppSearchModal.kt
@@ -19,11 +19,14 @@
 package net.skyscanner.backpack.compose.appsearchmodal
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.AnnotatedString
+import kotlinx.coroutines.launch
 import net.skyscanner.backpack.compose.appsearchmodal.internal.BpkAppSearchModalImpl
 import net.skyscanner.backpack.compose.icon.BpkIcon
 import net.skyscanner.backpack.compose.modal.BpkModal
+import net.skyscanner.backpack.compose.modal.BpkModalState
 import net.skyscanner.backpack.compose.modal.rememberBpkModalState
 import net.skyscanner.backpack.compose.navigationbar.NavIcon
 
@@ -71,15 +74,18 @@ fun BpkAppSearchModal(
     onInputChanged: (String) -> Unit,
     onClose: () -> Unit,
     modifier: Modifier = Modifier,
+    state: BpkModalState = rememberBpkModalState(),
 ) {
-
+    val coroutineScope = rememberCoroutineScope()
     BpkModal(
         navIcon = NavIcon.Close(
             contentDescription = closeAccessibilityLabel,
-            onClick = onClose,
+            onClick = {
+                coroutineScope.launch { state.hide() }
+            },
         ),
         modifier = modifier,
-        state = rememberBpkModalState(),
+        state = state,
         action = null,
         title = title,
         onDismiss = onClose,

diff --git a/...n/kotlin/net/skyscanner/backpack/compose/appsearchmodal/internal/BpkSearchModalLoading.kt b/...n/kotlin/net/skyscanner/backpack/compose/appsearchmodal/internal/BpkSearchModalLoading.kt
@@ -27,21 +27,28 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
 import net.skyscanner.backpack.compose.appsearchmodal.BpkAppSearchModalResult
 import net.skyscanner.backpack.compose.sleketon.BpkBodyTextSkeleton
+import net.skyscanner.backpack.compose.sleketon.BpkShimmerOverlay
 import net.skyscanner.backpack.compose.tokens.BpkSpacing
 
 private const val SkeletonCount = 10
 private const val SkeletonItemWidth = 200
+
 @Composable
-internal fun BpkSearchModalLoading(results: BpkAppSearchModalResult.Loading) {
-    Column(modifier = Modifier.semantics(mergeDescendants = true) {
-        contentDescription = results.accessibilityLabel
-    }) {
-        for (i in 0..SkeletonCount) {
-            BpkBodyTextSkeleton(
-                modifier = Modifier
-                    .padding(BpkSpacing.Base)
-                    .width(SkeletonItemWidth.dp),
-            )
+internal fun BpkSearchModalLoading(
+    results: BpkAppSearchModalResult.Loading,
+    modifier: Modifier = Modifier,
+) {
+    BpkShimmerOverlay(modifier = modifier) {
+        Column(modifier = Modifier.semantics(mergeDescendants = true) {
+            contentDescription = results.accessibilityLabel
+        }) {
+            for (i in 0..SkeletonCount) {
+                BpkBodyTextSkeleton(
+                    modifier = Modifier
+                        .padding(BpkSpacing.Base)
+                        .width(SkeletonItemWidth.dp),
+                )
+            }
         }
     }
 }