Added fab loading state

app/src/main/java/org/sirekanyan/outline/MainContent.kt

@@ -86,12 +86,16 @@ fun MainContent(api: OutlineApi, dao: ApiUrlDao, state: MainState) {
             state.openDrawer()
         }
         AddKeyButton(
-            visible = (state.page as? SelectedPage)?.keys is KeysSuccessState,
+            isVisible = state.isFabVisible,
+            isLoading = state.isFabLoading,
             onClick = {
                 state.selected?.let {
                     state.scope.launch {
+                        state.isFabLoading = true
                         api.createAccessKey(it)
                         state.refreshCurrentKeys(showLoading = false)
+                    }.invokeOnCompletion {
+                        state.isFabLoading = false
                     }
                 }
             },

app/src/main/java/org/sirekanyan/outline/MainState.kt

@@ -57,6 +57,8 @@ class MainState(val scope: CoroutineScope, private val api: OutlineApi) {
     var dialog by mutableStateOf<Dialog?>(null)
     val selected by derivedStateOf { (page as? SelectedPage)?.selected }
     var selectedKey by mutableStateOf<Key?>(null)
+    val isFabVisible by derivedStateOf { (page as? SelectedPage)?.keys is KeysSuccessState }
+    var isFabLoading by mutableStateOf(false)
 
     fun openDrawer() {
         scope.launch {

app/src/main/java/org/sirekanyan/outline/ui/AddKeyButton.kt

@@ -1,19 +1,23 @@
 package org.sirekanyan.outline.ui
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.animateContentSize
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Add
-import androidx.compose.material3.ExtendedFloatingActionButton
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -22,17 +26,27 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 
 @Composable
-fun AddKeyButton(visible: Boolean, onClick: () -> Unit) {
+fun AddKeyButton(isVisible: Boolean, isLoading: Boolean, onClick: () -> Unit) {
     Box(Modifier.fillMaxSize().navigationBarsPadding(), Alignment.BottomEnd) {
         AnimatedVisibility(
-            visible = visible,
+            visible = isVisible,
             enter = fadeIn() + slideInVertically { it / 2 },
             exit = fadeOut() + slideOutVertically { it / 2 },
         ) {
-            ExtendedFloatingActionButton(onClick, Modifier.padding(16.dp)) {
-                Icon(Icons.Outlined.Add, null)
-                Spacer(Modifier.size(16.dp))
-                Text("Add key")
+            FloatingActionButton(onClick, Modifier.padding(16.dp)) {
+                Row(
+                    modifier = Modifier.animateContentSize().padding(horizontal = 16.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    if (isLoading) {
+                        CircularProgressIndicator(Modifier.size(24.dp), strokeWidth = 2.dp)
+                    } else {
+                        Icon(Icons.Outlined.Add, null)
+                        Spacer(Modifier.width(12.dp))
+                        Text("Add key")
+                        Spacer(Modifier.width(4.dp))
+                    }
+                }
             }
         }
     }