From d97e28a6d8315a8360374039749870bf3a5402a1 Mon Sep 17 00:00:00 2001
From: Han Yin <han.yin@arm.com>
Date: Mon, 21 Apr 2025 14:51:17 -0700
Subject: [PATCH] UI: animate FAB on model preselection states

---
 .../llama/revamp/ui/scaffold/BottomAppBars.kt       | 13 +++++++++++--
 .../llama/revamp/ui/screens/ModelSelectionScreen.kt |  6 ++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/examples/llama.android/app/src/main/java/com/example/llama/revamp/ui/scaffold/BottomAppBars.kt b/examples/llama.android/app/src/main/java/com/example/llama/revamp/ui/scaffold/BottomAppBars.kt
index e6e639c06c..390ef370ca 100644
--- a/examples/llama.android/app/src/main/java/com/example/llama/revamp/ui/scaffold/BottomAppBars.kt
+++ b/examples/llama.android/app/src/main/java/com/example/llama/revamp/ui/scaffold/BottomAppBars.kt
@@ -1,5 +1,10 @@
 package com.example.llama.revamp.ui.scaffold
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.text.input.TextFieldState
@@ -236,9 +241,13 @@ fun ModelSelectionBottomBar(
         },
         floatingActionButton = {
             // Only show FAB if a model is selected
-            runAction.selectedModel?.let { model ->
+            AnimatedVisibility(
+                visible = runAction.selectedModel != null,
+                enter = scaleIn() + fadeIn(),
+                exit = scaleOut() + fadeOut()
+            ) {
                 FloatingActionButton(
-                    onClick = { runAction.onRun(model) },
+                    onClick = { runAction.selectedModel?.let { runAction.onRun(it) } },
                     containerColor = MaterialTheme.colorScheme.primary
                 ) {
                     Icon(
diff --git a/examples/llama.android/app/src/main/java/com/example/llama/revamp/ui/screens/ModelSelectionScreen.kt b/examples/llama.android/app/src/main/java/com/example/llama/revamp/ui/screens/ModelSelectionScreen.kt
index c018189aaf..8309fad703 100644
--- a/examples/llama.android/app/src/main/java/com/example/llama/revamp/ui/screens/ModelSelectionScreen.kt
+++ b/examples/llama.android/app/src/main/java/com/example/llama/revamp/ui/screens/ModelSelectionScreen.kt
@@ -51,9 +51,11 @@ fun ModelSelectionScreen(
     onManageModelsClicked: () -> Unit,
     viewModel: ModelSelectionViewModel,
 ) {
+    // Data: models
     val filteredModels by viewModel.filteredModels.collectAsState()
     val preselectedModel by viewModel.preselectedModel.collectAsState()
 
+    // Query states
     val textFieldState = viewModel.searchFieldState
     val isSearchActive by viewModel.isSearchActive.collectAsState()
     val searchQuery by remember(textFieldState) {
@@ -61,15 +63,15 @@ fun ModelSelectionScreen(
     }
     val queryResults by viewModel.queryResults.collectAsState()
 
+    // Filter states
     val activeFilters by viewModel.activeFilters.collectAsState()
     val activeFiltersCount by remember(activeFilters) {
         derivedStateOf { activeFilters.count { it.value }  }
     }
 
-
+    // UI states
     val focusRequester = remember { FocusRequester() }
     val keyboardController = LocalSoftwareKeyboardController.current
-
     val toggleSearchFocusAndIme: (Boolean) -> Unit = { show ->
         if (show) {
             focusRequester.requestFocus()