perf(about): eliminate all-row recomposition on library expand

app/src/main/java/com/example/research/ui/about/AboutScreen.kt

@@ -1,5 +1,6 @@
 package com.example.research.ui.about
 
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
@@ -66,6 +67,15 @@ fun AboutScreen(
     }
     var expandedLibraryId by remember { mutableStateOf<String?>(null) }
     var dialogLicense by remember { mutableStateOf<AboutLicense?>(null) }
+    val onToggleLibrary = remember {
+        { uniqueId: String ->
+            expandedLibraryId = if (expandedLibraryId == uniqueId) {
+                null
+            } else {
+                uniqueId
+            }
+        }
+    }
 
     Scaffold(
         topBar = {
@@ -93,24 +103,19 @@ fun AboutScreen(
                 .semantics { testTagsAsResourceId = true }
                 .padding(padding)
         ) {
-            item(key = "about_header") {
+            item(key = "about_header", contentType = "about_header") {
                 AboutHeader(versionName = versionName)
             }
             items(
                 items = librariesData?.libraries.orEmpty(),
                 key = AboutLibrary::uniqueId,
+                contentType = { "about_library" },
             ) { library ->
                 AboutLibraryRow(
                     library = library,
                     licenses = librariesData?.licenses.orEmpty(),
                     expanded = expandedLibraryId == library.uniqueId,
-                    onToggle = {
-                        expandedLibraryId = if (expandedLibraryId == library.uniqueId) {
-                            null
-                        } else {
-                            library.uniqueId
-                        }
-                    },
+                    onToggle = onToggleLibrary,
                     onLicenseClick = { dialogLicense = it },
                 )
             }
@@ -174,24 +179,29 @@ private fun AboutLibraryRow(
     library: AboutLibrary,
     licenses: Map<String, AboutLicense>,
     expanded: Boolean,
-    onToggle: () -> Unit,
+    onToggle: (String) -> Unit,
     onLicenseClick: (AboutLicense) -> Unit,
 ) {
     val uriHandler = LocalUriHandler.current
     val website = library.website?.takeIf(String::isNotBlank)
     val source = library.scm?.url?.takeIf(String::isNotBlank)
 
+    val background by animateColorAsState(
+        targetValue = if (expanded) {
+            MaterialTheme.colorScheme.surfaceContainerHighest
+        } else {
+            MaterialTheme.colorScheme.surface
+        },
+        label = "aboutLibraryRowBackground",
+    )
+
     Surface(
         modifier = Modifier
             .fillMaxWidth()
             .testTag("about_library_row")
             .semantics { testTagsAsResourceId = true },
-        color = if (expanded) {
-            MaterialTheme.colorScheme.surfaceContainerHighest
-        } else {
-            MaterialTheme.colorScheme.surface
-        },
-        onClick = onToggle
+        color = background,
+        onClick = { onToggle(library.uniqueId) }
     ) {
         Column(
             modifier = Modifier