PM-16850-PM-16851-PM-16852 - Updating full screen loading indicator (#…

…4581)
bitwarden · Jan 20, 2025 · 055c598 · 055c598
1 parent a185a94
commit 055c598
Show file tree

Hide file tree

Showing 29 changed files with 210 additions and 399 deletions.
diff --git a/...a/com/x8bit/bitwarden/ui/platform/components/content/BitwardenFullScreenLoadingContent.kt b/...a/com/x8bit/bitwarden/ui/platform/components/content/BitwardenFullScreenLoadingContent.kt
diff --git a/...c/main/java/com/x8bit/bitwarden/ui/platform/components/content/BitwardenLoadingContent.kt b/...c/main/java/com/x8bit/bitwarden/ui/platform/components/content/BitwardenLoadingContent.kt
@@ -5,10 +5,12 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.dp
 import com.x8bit.bitwarden.ui.platform.components.indicator.BitwardenCircularProgressIndicator
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@@ -19,23 +21,28 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 @Composable
 fun BitwardenLoadingContent(
     modifier: Modifier = Modifier,
-    message: String? = null,
+    text: String? = null,
 ) {
     Column(
         modifier = modifier,
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        message?.let {
+        text?.let {
             Text(
                 text = it,
                 style = BitwardenTheme.typography.titleMedium,
                 // setting color explicitly here as we can't assume what the surface will be.
                 color = BitwardenTheme.colorScheme.text.primary,
+                modifier = Modifier.testTag(tag = "AlertTitleText"),
             )
-            Spacer(Modifier.height(16.dp))
+            Spacer(modifier = Modifier.height(16.dp))
         }
-        BitwardenCircularProgressIndicator()
+        BitwardenCircularProgressIndicator(
+            modifier = Modifier
+                .size(48.dp)
+                .testTag(tag = "AlertProgressIndicator"),
+        )
         Spacer(modifier = Modifier.navigationBarsPadding())
     }
 }
diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/content/ObscuredContent.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/content/ObscuredContent.kt
diff --git a/...src/main/java/com/x8bit/bitwarden/ui/platform/components/dialog/BitwardenLoadingDialog.kt b/...src/main/java/com/x8bit/bitwarden/ui/platform/components/dialog/BitwardenLoadingDialog.kt
@@ -1,83 +1,57 @@
 package com.x8bit.bitwarden.ui.platform.components.dialog
 
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.material3.Card
-import androidx.compose.material3.CardDefaults
-import androidx.compose.material3.Text
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.semantics.testTagsAsResourceId
+import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.window.Dialog
-import androidx.compose.ui.window.DialogProperties
-import com.x8bit.bitwarden.ui.platform.components.indicator.BitwardenCircularProgressIndicator
+import androidx.compose.ui.window.Popup
+import androidx.compose.ui.window.PopupProperties
+import com.x8bit.bitwarden.ui.platform.components.content.BitwardenLoadingContent
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 
 /**
  * Represents a Bitwarden-styled loading dialog that shows text and a circular progress indicator.
  *
+ * This implementation uses a `Popup` because the standard `Dialog` did not work with the intended
+ * designs. When using a `Dialog`, the status bar was appearing dark and the content was going below
+ * the navigation bar. To ensure the loading overlay fully covers the entire screen—including the
+ * status bar area, `Popup` was used with `clippingEnabled = false`. This allows it to extend
+ * beyond the default bounds, ensuring a full-screen design.
+ *
+ * We retained the Dialog nomenclature to minimize refactor disruption, but we plan to transition
+ * to Modal-based terminology in the future. (https://bitwarden.atlassian.net/browse/PM-17356)
+ *
  * @param text The text to display in the dialog.
  */
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun BitwardenLoadingDialog(
     text: String,
 ) {
-    Dialog(
-        onDismissRequest = {},
-        properties = DialogProperties(
+    Popup(
+        properties = PopupProperties(
             dismissOnBackPress = false,
             dismissOnClickOutside = false,
+            clippingEnabled = false,
         ),
     ) {
-        Card(
-            shape = BitwardenTheme.shapes.dialog,
-            colors = CardDefaults.cardColors(
-                containerColor = BitwardenTheme.colorScheme.background.primary,
-                contentColor = BitwardenTheme.colorScheme.text.primary,
-            ),
+        BitwardenLoadingContent(
+            text = text,
             modifier = Modifier
                 .semantics {
                     testTagsAsResourceId = true
                     testTag = "AlertPopup"
                 }
-                .fillMaxWidth()
-                .wrapContentHeight(),
-        ) {
-            Column(
-                modifier = Modifier.fillMaxWidth(),
-                verticalArrangement = Arrangement.Center,
-                horizontalAlignment = Alignment.CenterHorizontally,
-            ) {
-                Text(
-                    text = text,
-                    modifier = Modifier
-                        .testTag(tag = "AlertTitleText")
-                        .padding(
-                            top = 24.dp,
-                            bottom = 8.dp,
-                        ),
-                )
-                BitwardenCircularProgressIndicator(
-                    modifier = Modifier
-                        .testTag(tag = "AlertProgressIndicator")
-                        .padding(
-                            top = 8.dp,
-                            bottom = 24.dp,
-                        ),
-                )
-            }
-        }
+                .fillMaxSize()
+                .background(
+                    color = BitwardenTheme.colorScheme.background.secondary.copy(alpha = 0.90f),
+                ),
+        )
     }
 }