Show progress dialog while we are sending invites in a room (#5342)

* Add `InvitePeopleState.sendInvitesAction`

Keep track of the progress on sending invites with a new state property.

* Keep `RoomInviteMembersView` open until invites are sent

* Sync strings from localazy

* extend `ProgressDialog` to support custom content

For my current design, a simple text element is insufficient. I extend
`ProgressDialog` to give more flexibility over the content of the dialog.

* Show progress dialog while invites are being sent

* Add new ProgressDialog previews to the naming exceptions list

* Update screenshots

---------

Co-authored-by: ElementBot <android@element.io>
Co-authored-by: Jorge Martín <jorgem@element.io>

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/invite/RoomInviteMembersNode.kt

@@ -8,6 +8,7 @@
 package io.element.android.features.roomdetails.impl.invite
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
 import com.bumble.appyx.core.lifecycle.subscribe
 import com.bumble.appyx.core.modality.BuildContext
@@ -49,11 +50,18 @@ class RoomInviteMembersNode(
     @Composable
     override fun View(modifier: Modifier) {
         val state = invitePeoplePresenter.present()
+
+        // Once invites have been sent successfully, close the Invite view.
+        LaunchedEffect(state.sendInvitesAction) {
+            if (state.sendInvitesAction.isReady()) {
+                navigateUp()
+            }
+        }
+
         RoomInviteMembersView(
             state = state,
             modifier = modifier,
-            onBackClick = { navigateUp() },
-            onDone = { navigateUp() }
+            onBackClick = { navigateUp() }
         ) {
             invitePeopleRenderer.Render(state, Modifier)
         }

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/invite/RoomInviteMembersView.kt

@@ -8,22 +8,29 @@
 package io.element.android.features.roomdetails.impl.invite
 
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
 import io.element.android.features.invitepeople.api.InvitePeopleEvents
 import io.element.android.features.invitepeople.api.InvitePeopleState
 import io.element.android.features.invitepeople.api.InvitePeopleStateProvider
 import io.element.android.features.roomdetails.impl.R
+import io.element.android.libraries.designsystem.components.ProgressDialog
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Scaffold
+import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TextButton
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.ui.strings.CommonStrings
@@ -32,7 +39,6 @@ import io.element.android.libraries.ui.strings.CommonStrings
 fun RoomInviteMembersView(
     state: InvitePeopleState,
     onBackClick: () -> Unit,
-    onDone: () -> Unit,
     modifier: Modifier = Modifier,
     invitePeopleView: @Composable () -> Unit,
 ) {
@@ -49,7 +55,6 @@ fun RoomInviteMembersView(
                 },
                 onSubmitClick = {
                     state.eventSink(InvitePeopleEvents.SendInvites)
-                    onDone()
                 },
                 canSend = state.canInvite,
             )
@@ -64,6 +69,10 @@ fun RoomInviteMembersView(
             invitePeopleView()
         }
     }
+
+    if (state.sendInvitesAction.isLoading()) {
+        InviteProgressDialog()
+    }
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -86,6 +95,24 @@ private fun RoomInviteMembersTopBar(
     )
 }
 
+@Composable
+private fun InviteProgressDialog() {
+    ProgressDialog {
+        Spacer(modifier = Modifier.height(8.dp))
+        Text(
+            text = stringResource(R.string.screen_room_details_invite_people_preparing),
+            color = ElementTheme.colors.textPrimary,
+            style = ElementTheme.typography.fontHeadingSmMedium,
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+        Text(
+            text = stringResource(R.string.screen_room_details_invite_people_dont_close),
+            color = ElementTheme.colors.textSecondary,
+            style = MaterialTheme.typography.bodyMedium,
+        )
+    }
+}
+
 @PreviewsDayNight
 @Composable
 internal fun RoomInviteMembersViewPreview(@PreviewParameter(InvitePeopleStateProvider::class) state: InvitePeopleState) = ElementPreview {
@@ -93,6 +120,5 @@ internal fun RoomInviteMembersViewPreview(@PreviewParameter(InvitePeopleStatePro
         state = state,
         invitePeopleView = {},
         onBackClick = {},
-        onDone = {},
     )
 }

features/roomdetails/impl/src/main/res/values/localazy.xml

@@ -50,6 +50,8 @@
   <string name="screen_room_details_error_loading_notification_settings">"An error occurred when loading notification settings."</string>
   <string name="screen_room_details_error_muting">"Failed muting this room, please try again."</string>
   <string name="screen_room_details_error_unmuting">"Failed unmuting this room, please try again."</string>
+  <string name="screen_room_details_invite_people_dont_close">"Don\'t close the app until finished."</string>
+  <string name="screen_room_details_invite_people_preparing">"Preparing invitations…"</string>
   <string name="screen_room_details_invite_people_title">"Invite people"</string>
   <string name="screen_room_details_leave_conversation_title">"Leave conversation"</string>
   <string name="screen_room_details_leave_room_title">"Leave room"</string>