Fall back to initials avatar when image avatar doesn't work

Initially I had it implemented such that it would only fallback on
error, but actually it's nice to have also while loading if it takes
a while to load the avatar.

Author: SpiritCroc

changelog.d/2667.bugfix

@@ -0,0 +1 @@
+Fall back to name-based generated avatars when image avatars don't load.

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt

@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.SideEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -32,12 +33,13 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import coil.compose.AsyncImage
+import coil.compose.AsyncImagePainter
+import coil.compose.SubcomposeAsyncImage
+import coil.compose.SubcomposeAsyncImageContent
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.designsystem.colors.AvatarColorsProvider
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
-import io.element.android.libraries.designsystem.preview.debugPlaceholderAvatar
 import io.element.android.libraries.designsystem.text.toSp
 import io.element.android.libraries.designsystem.theme.components.Text
 import timber.log.Timber
@@ -71,16 +73,23 @@ private fun ImageAvatar(
     modifier: Modifier = Modifier,
     contentDescription: String? = null,
 ) {
-    AsyncImage(
+    SubcomposeAsyncImage(
         model = avatarData,
-        onError = {
-            Timber.e(it.result.throwable, "Error loading avatar $it\n${it.result}")
-        },
         contentDescription = contentDescription,
         contentScale = ContentScale.Crop,
-        placeholder = debugPlaceholderAvatar(),
         modifier = modifier
-    )
+    ) {
+        when (val state = painter.state) {
+            is AsyncImagePainter.State.Success -> SubcomposeAsyncImageContent()
+            is AsyncImagePainter.State.Error -> {
+                SideEffect {
+                    Timber.e(state.result.throwable, "Error loading avatar $state\n${state.result}")
+                }
+                InitialsAvatar(avatarData = avatarData)
+            }
+            else -> InitialsAvatar(avatarData = avatarData)
+        }
+    }
 }
 
 @Composable