Fix the searchbar animation appearing.

Clean the searchbar after closing.

app/src/main/java/cz/fel/barysole/ackeetesttask/ui/uielement/main/MySearchBar.kt

 package cz.fel.barysole.ackeetesttask.ui.uielement.main
 
-import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -38,50 +37,51 @@ fun MySearchBar(
         mutableStateOf(false)
     }
     val searchBarState by characterSearchViewModel.uiState.collectAsState()
-    AnimatedVisibility(visible = isSearchBarShowing.value) {
-        SearchBar(
-            modifier = Modifier.padding(if (isSearchBarIsActive.value) 0.dp else 8.dp),
-            query = searchBarState.query,
-            onQueryChange = { characterSearchViewModel.acceptAction(UiAction.SearchCharacters(it)) },
-            onSearch = { characterSearchViewModel.acceptAction(UiAction.SearchCharacters(it)) },
-            active = isSearchBarIsActive.value,
-            onActiveChange = { isSearchBarIsActive.value = it },
-            placeholder = {
-                Text(text = "Start enter a name...")
-            },
-            leadingIcon = {
-                Icon(
-                    painterResource(R.drawable.baseline_arrow_back_ios_new_24),
-                    modifier = Modifier.clickable { isSearchBarShowing.value = false },
-                    contentDescription = "Arrow back icon"
-                )
-            },
-            trailingIcon = {
-                Icon(
-                    painterResource(R.drawable.baseline_close_24),
-                    contentDescription = "Close icon",
-                    modifier = Modifier.clickable {
-                        if (searchBarState.query.isNotBlank()) {
-                            characterSearchViewModel.acceptAction(UiAction.SearchCharacters(""))
-                        } else {
-                            isSearchBarShowing.value = false
-                        }
-                    }
-                )
-            },
-            tonalElevation = 0.dp,
-            colors = if (isSearchBarIsActive.value) SearchBarDefaults.colors(containerColor = MaterialTheme.colorScheme.background) else SearchBarDefaults.colors()
-        ) {
-            characterSearchViewModel.pagingDataFlow.collectAsLazyPagingItems().let {
-                // do not show elements when the query is empty
-                if (searchBarState.query.isNotBlank()) {
-                    if (it.loadState.refresh is LoadState.Error) {
-                        rememberCoroutineScope().launch {
-                            snackbar.showSnackbar("Network error!")
-                        }
+    if (!isSearchBarShowing.value) {
+        characterSearchViewModel.acceptAction(UiAction.SearchCharacters(""))
+    }
+    SearchBar(
+        modifier = Modifier.padding(if (isSearchBarIsActive.value) 0.dp else 8.dp),
+        query = searchBarState.query,
+        onQueryChange = { characterSearchViewModel.acceptAction(UiAction.SearchCharacters(it)) },
+        onSearch = { characterSearchViewModel.acceptAction(UiAction.SearchCharacters(it)) },
+        active = isSearchBarIsActive.value,
+        onActiveChange = { isSearchBarIsActive.value = it },
+        placeholder = {
+            Text(text = "Start enter a name...")
+        },
+        leadingIcon = {
+            Icon(
+                painterResource(R.drawable.baseline_arrow_back_ios_new_24),
+                modifier = Modifier.clickable { isSearchBarShowing.value = false },
+                contentDescription = "Arrow back icon"
+            )
+        },
+        trailingIcon = {
+            Icon(
+                painterResource(R.drawable.baseline_close_24),
+                contentDescription = "Close icon",
+                modifier = Modifier.clickable {
+                    if (searchBarState.query.isNotBlank()) {
+                        characterSearchViewModel.acceptAction(UiAction.SearchCharacters(""))
                     } else {
-                        CharacterList(it)
+                        isSearchBarShowing.value = false
+                    }
+                }
+            )
+        },
+        tonalElevation = 0.dp,
+        colors = if (isSearchBarIsActive.value) SearchBarDefaults.colors(containerColor = MaterialTheme.colorScheme.background) else SearchBarDefaults.colors()
+    ) {
+        characterSearchViewModel.pagingDataFlow.collectAsLazyPagingItems().let {
+            // do not show elements when the query is empty
+            if (searchBarState.query.isNotBlank()) {
+                if (it.loadState.refresh is LoadState.Error) {
+                    rememberCoroutineScope().launch {
+                        snackbar.showSnackbar("Network error!")
                     }
+                } else {
+                    CharacterList(it)
                 }
             }
         }

app/src/main/java/cz/fel/barysole/ackeetesttask/ui/uielement/main/MyTopAppBar.kt

 package cz.fel.barysole.ackeetesttask.ui.uielement.main
 
+import androidx.compose.animation.Crossfade
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -35,30 +36,32 @@ fun MyTopAppBar(
             mutableStateOf(false)
         }
         // showing iff isSearchBarShowing is true
-        MySearchBar(isSearchBarShowing, snackbar)
-        if (!isSearchBarShowing.value) {
-            TopAppBar(
-                modifier = Modifier.shadow(16.dp),
-                title = {
-                    Text(
-                        //there is no null in the screenWithTopAppBarList
-                        stringResource(selectedScreen!!.nameResId),
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis
-                    )
-                },
-                actions = {
-                    if (selectedScreen == Screen.Characters) {
-                        IconButton(onClick = { isSearchBarShowing.value = true }) {
-                            Icon(
-                                imageVector = Icons.Default.Search,
-                                contentDescription = "Search button"
-                            )
+        Crossfade(targetState = isSearchBarShowing.value) { showSearchBar ->
+            when (showSearchBar) {
+                true -> MySearchBar(isSearchBarShowing, snackbar)
+                false -> TopAppBar(
+                    modifier = Modifier.shadow(16.dp),
+                    title = {
+                        Text(
+                            //there is no null in the screenWithTopAppBarList
+                            stringResource(selectedScreen!!.nameResId),
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis
+                        )
+                    },
+                    actions = {
+                        if (selectedScreen == Screen.Characters) {
+                            IconButton(onClick = { isSearchBarShowing.value = true }) {
+                                Icon(
+                                    imageVector = Icons.Default.Search,
+                                    contentDescription = "Search button"
+                                )
+                            }
                         }
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors(containerColor = MaterialTheme.colorScheme.background)
-            )
+                    },
+                    colors = TopAppBarDefaults.topAppBarColors(containerColor = MaterialTheme.colorScheme.background)
+                )
+            }
         }
     }
 }
\ No newline at end of file