Show the loader dialog when syncing the location data (#3598)

* Show the LoaderDialog when syncing the Location data
Update the LoaderDialog:
    - Make box and progressBar size dynamic
    - Make the progressDialog message as optional
    - Add the ability to show either the ProgressBar or LineSpinFadeLoaderProgressIndicator

* Add an option in the LoaderDialog to show a dialog with non blocking UI
Show a non blocking dialog when applying location filtering

* clean-up: rename variables

android/quest/src/main/java/org/smartregister/fhircore/quest/ui/shared/components/LineSpinFadeLoaderProgressIndicator.kt → android/engine/src/main/java/org/smartregister/fhircore/engine/ui/components/LineSpinFadeLoaderProgressIndicator.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package org.smartregister.fhircore.quest.ui.shared.components
+package org.smartregister.fhircore.engine.ui.components
 
 import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.RepeatMode

android/engine/src/main/java/org/smartregister/fhircore/engine/ui/components/register/LoaderDialog.kt

@@ -19,10 +19,9 @@ package org.smartregister.fhircore.engine.ui.components.register
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Surface
@@ -35,15 +34,16 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.flowOf
 import org.smartregister.fhircore.engine.R
+import org.smartregister.fhircore.engine.ui.components.LineSpinFadeLoaderProgressIndicator
 import org.smartregister.fhircore.engine.util.annotation.PreviewWithBackgroundExcludeGenerated
 
 const val LOADER_DIALOG_PROGRESS_BAR_TAG = "loaderDialogProgressBarTag"
@@ -52,58 +52,113 @@ const val LOADER_DIALOG_PROGRESS_MSG_TAG = "loaderDialogProgressMsgTag"
 @Composable
 fun LoaderDialog(
   modifier: Modifier = Modifier,
-  dialogMessage: String,
+  dialogMessage: String? = null,
   percentageProgressFlow: Flow<Int> = flowOf(0),
   showPercentageProgress: Boolean = false,
+  boxWidth: Dp = 240.dp,
+  boxHeight: Dp = 180.dp,
+  progressBarSize: Dp = 40.dp,
+  showBackground: Boolean = true,
+  showLineSpinIndicator: Boolean = false,
+  showOverlay: Boolean = true,
+  alignment: Alignment = Alignment.Center,
 ) {
   val currentPercentage = percentageProgressFlow.collectAsState(0).value
+
+  if (showOverlay) {
+    Dialog(onDismissRequest = {}, properties = DialogProperties(dismissOnBackPress = false)) {
+      LoaderContent(
+        modifier = modifier,
+        dialogMessage = dialogMessage,
+        currentPercentage = currentPercentage,
+        showPercentageProgress = showPercentageProgress,
+        boxWidth = boxWidth,
+        boxHeight = boxHeight,
+        progressBarSize = progressBarSize,
+        showBackground = showBackground,
+        showLineSpinIndicator = showLineSpinIndicator,
+      )
+    }
+  } else {
+    Box(
+      modifier = modifier.wrapContentSize(),
+      contentAlignment = alignment,
+    ) {
+      LoaderContent(
+        modifier = modifier,
+        dialogMessage = dialogMessage,
+        currentPercentage = currentPercentage,
+        showPercentageProgress = showPercentageProgress,
+        boxWidth = boxWidth,
+        boxHeight = boxHeight,
+        progressBarSize = progressBarSize,
+        showBackground = showBackground,
+        showLineSpinIndicator = showLineSpinIndicator,
+      )
+    }
+  }
+}
+
+@Composable
+private fun LoaderContent(
+  modifier: Modifier,
+  dialogMessage: String?,
+  currentPercentage: Int,
+  showPercentageProgress: Boolean,
+  boxWidth: Dp,
+  boxHeight: Dp,
+  progressBarSize: Dp,
+  showBackground: Boolean,
+  showLineSpinIndicator: Boolean,
+) {
   val openDialog = remember { mutableStateOf(true) }
   if (openDialog.value) {
-    Dialog(
-      onDismissRequest = { openDialog.value = true },
-      properties = DialogProperties(dismissOnBackPress = true),
-    ) {
-      Box(modifier.size(240.dp, 180.dp)) {
-        Column(
-          modifier = modifier.padding(8.dp),
-          verticalArrangement = Arrangement.Center,
-          horizontalAlignment = Alignment.CenterHorizontally,
+    Box(modifier.size(boxWidth, boxHeight)) {
+      Column(
+        modifier = modifier.padding(8.dp),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally,
+      ) {
+        Surface(
+          modifier = modifier.size(boxWidth, boxHeight),
+          shape = RoundedCornerShape(8.dp),
+          color = if (showBackground) Color.Black.copy(alpha = 0.56f) else Color.Transparent,
         ) {
-          Surface(
-            color = Color.Black.copy(alpha = 0.56f),
-            modifier = modifier.fillMaxSize(),
-            shape = RoundedCornerShape(8),
+          Column(
+            modifier = modifier.padding(8.dp),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally,
           ) {
-            Column(
-              verticalArrangement = Arrangement.Center,
-              horizontalAlignment = Alignment.CenterHorizontally,
-            ) {
+            if (showLineSpinIndicator) {
+              LineSpinFadeLoaderProgressIndicator(
+                color = Color.White,
+                lineLength = 8f,
+                innerRadius = 12f,
+              )
+            } else {
               CircularProgressIndicator(
                 color = Color.White,
                 strokeWidth = 3.dp,
-                modifier = modifier.testTag(LOADER_DIALOG_PROGRESS_BAR_TAG).size(40.dp),
+                modifier = modifier.size(progressBarSize),
               )
-              Row(
-                horizontalArrangement = Arrangement.Center,
-                verticalAlignment = Alignment.CenterVertically,
-              ) {
-                Text(
-                  fontSize = 16.sp,
-                  color = Color.White,
-                  text = dialogMessage,
-                  modifier =
-                    modifier.testTag(LOADER_DIALOG_PROGRESS_MSG_TAG).padding(vertical = 16.dp),
-                )
+            }
 
-                if (showPercentageProgress) {
-                  Text(
-                    fontSize = 15.sp,
-                    color = Color.White,
-                    text = stringResource(id = R.string.percentage_progress, currentPercentage),
-                    modifier = modifier.padding(horizontal = 3.dp, vertical = 16.dp),
-                  )
-                }
-              }
+            dialogMessage?.let {
+              Text(
+                text = it,
+                color = Color.White,
+                fontSize = 14.sp,
+                modifier = modifier.padding(top = 8.dp),
+              )
+            }
+
+            if (showPercentageProgress) {
+              Text(
+                fontSize = 15.sp,
+                color = Color.White,
+                text = "$currentPercentage%",
+                modifier = modifier.padding(top = 4.dp),
+              )
             }
           }
         }
@@ -122,3 +177,16 @@ fun LoaderDialog(
 fun LoaderDialogPreview() {
   LoaderDialog(dialogMessage = stringResource(id = R.string.syncing))
 }
+
+@PreviewWithBackgroundExcludeGenerated
+@Composable
+fun LoaderDialogPreviewTest() {
+  LoaderDialog(
+    boxWidth = 50.dp,
+    boxHeight = 50.dp,
+    progressBarSize = 25.dp,
+    showBackground = false,
+    showLineSpinIndicator = true,
+    showOverlay = false,
+  )
+}

android/quest/src/main/java/org/smartregister/fhircore/quest/ui/geowidget/GeoWidgetLauncherFragment.kt

@@ -194,6 +194,7 @@ class GeoWidgetLauncherFragment : Fragment(), OnSyncListener {
                 launchQuestionnaire = geoWidgetLauncherViewModel::launchQuestionnaire,
                 decodeImage = geoWidgetLauncherViewModel::getImageBitmap,
                 onAppMainEvent = appMainViewModel::onEvent,
+                isSyncing = geoWidgetLauncherViewModel.isSyncing,
               )
             }
           }

android/quest/src/main/java/org/smartregister/fhircore/quest/ui/geowidget/GeoWidgetLauncherScreen.kt

@@ -18,24 +18,33 @@ package org.smartregister.fhircore.quest.ui.geowidget
 
 import android.content.Context
 import android.graphics.Bitmap
+import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
 import androidx.fragment.app.FragmentManager
 import androidx.fragment.compose.AndroidFragment
 import androidx.fragment.compose.rememberFragmentState
 import androidx.lifecycle.MutableLiveData
 import androidx.navigation.NavController
+import kotlinx.coroutines.flow.StateFlow
 import org.hl7.fhir.r4.model.ResourceType
 import org.smartregister.fhircore.engine.configuration.QuestionnaireConfig
 import org.smartregister.fhircore.engine.configuration.geowidget.GeoWidgetConfiguration
 import org.smartregister.fhircore.engine.domain.model.ResourceData
 import org.smartregister.fhircore.engine.domain.model.ToolBarHomeNavigation
+import org.smartregister.fhircore.engine.ui.components.register.LoaderDialog
 import org.smartregister.fhircore.engine.util.extension.showToast
 import org.smartregister.fhircore.geowidget.model.GeoJsonFeature
 import org.smartregister.fhircore.geowidget.screens.GeoWidgetFragment
@@ -65,8 +74,11 @@ fun GeoWidgetLauncherScreen(
   launchQuestionnaire: (QuestionnaireConfig, GeoJsonFeature, Context) -> Unit,
   decodeImage: ((String) -> Bitmap?)?,
   onAppMainEvent: (AppMainEvent) -> Unit,
+  isSyncing: StateFlow<Boolean>,
 ) {
   val context = LocalContext.current
+  val syncing by isSyncing.collectAsState()
+
   Scaffold(
     topBar = {
       Column {
@@ -118,14 +130,20 @@ fun GeoWidgetLauncherScreen(
     },
   ) { innerPadding ->
     val fragmentState = rememberFragmentState()
-    Box(modifier = modifier.padding(innerPadding)) {
+    Box(
+      modifier = modifier.padding(innerPadding).fillMaxSize(),
+    ) {
       AndroidFragment<GeoWidgetFragment>(fragmentState = fragmentState) { fragment ->
         fragment
           .setUseGpsOnAddingLocation(false)
           .setAddLocationButtonVisibility(geoWidgetConfiguration.showAddLocation)
           .setOnAddLocationListener { feature: GeoJsonFeature ->
             if (feature.geometry?.coordinates == null) return@setOnAddLocationListener
-            launchQuestionnaire(geoWidgetConfiguration.registrationQuestionnaire, feature, context)
+            launchQuestionnaire(
+              geoWidgetConfiguration.registrationQuestionnaire,
+              feature,
+              context,
+            )
           }
           .setOnCancelAddingLocationListener {
             context.showToast(context.getString(R.string.on_cancel_adding_location))
@@ -153,6 +171,23 @@ fun GeoWidgetLauncherScreen(
           observerGeoJsonFeatures(geoJsonFeatures)
         }
       }
+      if (syncing) {
+        Box(
+          modifier =
+            Modifier.fillMaxSize().padding(16.dp).pointerInput(Unit) { detectTapGestures {} },
+          contentAlignment = Alignment.Center,
+        ) {
+          LoaderDialog(
+            boxWidth = 50.dp,
+            boxHeight = 50.dp,
+            progressBarSize = 25.dp,
+            showBackground = true,
+            showLineSpinIndicator = true,
+            showOverlay = false,
+            modifier = Modifier.align(Alignment.Center),
+          )
+        }
+      }
     }
   }
 }