Add landscapist-animation dependency and implement crossfade animation

Author: skydoves

core-designsystem/build.gradle.kts

@@ -22,6 +22,7 @@ plugins {
 dependencies {
   // image loading
   api(libs.landscapist.glide)
+  api(libs.landscapist.animation)
   api(libs.landscapist.placeholder)
 
   api(libs.androidx.compose.runtime)

feature-chats/src/main/kotlin/io/getstream/whatsappclone/chats/messages/WhatsAppMessageTopBar.kt

@@ -35,6 +35,8 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.skydoves.landscapist.animation.crossfade.CrossfadePlugin
+import com.skydoves.landscapist.components.rememberImageComponent
 import com.skydoves.landscapist.glide.GlideImage
 import io.getstream.chat.android.client.ChatClient
 import io.getstream.whatsappclone.designsystem.component.WhatsAppLoadingIndicator
@@ -118,6 +120,9 @@ private fun WhatsAppMessageUserInfo(
             messageUiState.data.image.takeIf { it.isNotEmpty() }
               ?: io.getstream.whatsappclone.designsystem.R.drawable.stream_logo
           },
+          component = rememberImageComponent {
+            +CrossfadePlugin()
+          },
           previewPlaceholder = io.getstream.whatsappclone.designsystem.R.drawable.placeholder
         )
 

gradle/libs.versions.toml

@@ -46,6 +46,7 @@ stream-compose = { group = "io.getstream", name = "stream-chat-android-compose",
 sealedx-core = { group = "com.github.skydoves", name = "sealedx-core", version.ref = "sealedx" }
 sealedx-processor = { group = "com.github.skydoves", name = "sealedx-processor", version.ref = "sealedx" }
 landscapist-glide = { group = "com.github.skydoves", name = "landscapist-glide", version.ref = "landscapist" }
+landscapist-animation = { group = "com.github.skydoves", name = "landscapist-animation", version.ref = "landscapist" }
 landscapist-placeholder = { group = "com.github.skydoves", name = "landscapist-placeholder", version.ref = "landscapist" }
 accompanist-pager = { group = "com.google.accompanist", name = "accompanist-pager", version.ref = "accompanist" }
 accompanist-indicator = { group = "com.google.accompanist", name = "accompanist-pager-indicators", version.ref = "accompanist" }