Add Loading Screen (#43)

This adds a loading screen component and integrates it into the OID4VCI flow.
spruceid · Oct 10, 2024 · 9bdd703 · 9bdd703
1 parent 9505a1c
commit 9bdd703
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 8 deletions.
diff --git a/example/build.gradle.kts b/example/build.gradle.kts
@@ -68,6 +68,8 @@ dependencies {
     implementation("androidx.compose.material3:material3")
     implementation("androidx.navigation:navigation-compose:2.7.7")
     implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.8.4")
+    implementation("app.rive:rive-android:8.7.0")
+    implementation("androidx.startup:startup-runtime:1.1.1")
     implementation(project(mapOf("path" to ":MobileSdk")))
     implementation("com.google.zxing:core:3.5.1")
     implementation("io.ktor:ktor-client-core:2.3.12")

diff --git a/example/src/main/AndroidManifest.xml b/example/src/main/AndroidManifest.xml
@@ -50,6 +50,14 @@
                 <data android:scheme="openid4vp" />
             </intent-filter>
         </activity>
+        <provider
+            android:name="androidx.startup.InitializationProvider"
+            android:authorities="${applicationId}.androidx-startup"
+            android:exported="false"
+            tools:node="merge">
+            <meta-data android:name="app.rive.runtime.kotlin.RiveInitializer"
+                android:value="androidx.startup" />
+        </provider>
     </application>
 
 </manifest>
diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/LoadingView.kt b/example/src/main/java/com/spruceid/mobilesdkexample/LoadingView.kt
@@ -0,0 +1,90 @@
+package com.spruceid.mobilesdkexample
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.viewinterop.AndroidView
+import app.rive.runtime.kotlin.RiveAnimationView
+import app.rive.runtime.kotlin.core.ExperimentalAssetLoader
+import com.spruceid.mobilesdkexample.ui.theme.CodeBorder
+import com.spruceid.mobilesdkexample.ui.theme.ColorBase800
+import com.spruceid.mobilesdkexample.ui.theme.Inter
+
+@OptIn(ExperimentalAssetLoader::class)
+@Composable
+fun LoadingView(
+    loadingText: String,
+    cancelButtonLabel: String = "Cancel",
+    onCancel: (() -> Unit)? = null
+) {
+    Box(modifier = Modifier.fillMaxSize()) {
+        Column(
+            modifier = Modifier.fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            AndroidView(
+                modifier = Modifier.size(60.dp),
+                factory = { context ->
+                    RiveAnimationView(context).also {
+                        it.setRiveResource(
+                            resId = R.raw.loading_spinner,
+                        )
+                    }
+                }
+            )
+            Text(
+                text = loadingText,
+                fontFamily = Inter,
+                fontWeight = FontWeight.Normal,
+                color = ColorBase800,
+                fontSize = 20.sp,
+                modifier = Modifier.padding(top = 10.dp)
+            )
+        }
+        if (onCancel != null) {
+            Column(
+                modifier = Modifier.fillMaxSize(),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Bottom
+            ) {
+                Button(
+                    onClick = {
+                        onCancel()
+                    },
+                    shape = RoundedCornerShape(5.dp),
+                    colors =  ButtonDefaults.buttonColors(
+                        containerColor = Color.Transparent,
+                        contentColor = Color.Black,
+                    ),
+                    border = BorderStroke(1.dp, CodeBorder),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                ) {
+                    Text(
+                        text = cancelButtonLabel,
+                        fontFamily = Inter,
+                        fontWeight = FontWeight.SemiBold,
+                        color = Color.Black,
+                    )
+                }
+            }
+        }
+    }
+}
diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/ui/theme/Color.kt b/example/src/main/java/com/spruceid/mobilesdkexample/ui/theme/Color.kt
@@ -22,4 +22,5 @@ val VerifierRequestBadgeFieldFill = Color(0xFFF7F5F0)
 val VerifierRequestBadgeFieldText = Color(0xFF0C0A09)
 val VerifiedGreenValid = Color(0xFF047857)
 val VerifiedRedInvalid = Color(0xFFBE123C)
-val VerifierCloseButton = Color(0xFF44403C)
+val VerifierCloseButton = Color(0xFF44403C)
+val ColorBase800 = Color(0xFF75675C)
diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/wallet/OID4VCI.kt b/example/src/main/java/com/spruceid/mobilesdkexample/wallet/OID4VCI.kt
@@ -25,6 +25,7 @@ import com.spruceid.mobile.sdk.rs.HttpResponse
 import com.spruceid.mobile.sdk.rs.Oid4vci
 import com.spruceid.mobile.sdk.rs.generatePopComplete
 import com.spruceid.mobile.sdk.rs.generatePopPrepare
+import com.spruceid.mobilesdkexample.LoadingView
 import com.spruceid.mobilesdkexample.R
 import com.spruceid.mobilesdkexample.ScanningComponent
 import com.spruceid.mobilesdkexample.ScanningType
@@ -145,13 +146,7 @@ fun OID4VCIView(
     }
 
     if (loading) {
-        Column(
-            modifier = Modifier.fillMaxSize(),
-            verticalArrangement = Arrangement.Center,
-            horizontalAlignment = Alignment.CenterHorizontally
-        ) {
-            Text("Loading...")
-        }
+        LoadingView(loadingText = "Loading...")
     } else if (err != null) {
         Column(
             modifier = Modifier.fillMaxSize(),

diff --git a/example/src/main/res/raw/loading_spinner.riv b/example/src/main/res/raw/loading_spinner.riv
diff --git a/example/src/main/res/values/colors.xml b/example/src/main/res/values/colors.xml
@@ -20,4 +20,5 @@
     <color name="spruce_blue">#FF2F6AE1</color>
     <color name="secondary_button_red">#FFE11D48</color>
     <color name="cta_button_green">#FF087455</color>
+    <color name="color_base_800">#FF75675C</color>
 </resources>