Media loading flow changes (#483)

* Use an imageProvider directly from the view in the home screen

* Add support for media request coalescing

* Rename MediaProxy to MediaLoader

* Add new image loading mechanism to the room details screen avatar.

* Use the `SettingsScreen` prefix for all settings screen related components

* Add new image loading mechanism to the room header

* Add new image loading mechanism to the room member details screen

* Introduce a LoadableImage SwiftUI view that will automatically handle image loading

* Adopt the new LoadableImage where possible

* Fix LoadableImage not using/storing loaded images properly

* Simplify media loader enqueueing

* Made LodableImage load content after mediaSource updates. Adopt it on the home and settings screens

* Introduce a LoadableAvatarImage component and reuse it throughout the app

* Small logging tweaks, made some LoadableImage properties private

* Fix redacted skeletons avatar background color

* Fix placeholder avatars changing when backgrounding the app

* PR comments.

- Trim the @ sign off of mxid placeholders.
- Only expose AvatarSize on the avatar image, use CGSize elsewhere.

Co-authored-by: Doug <douglase@element.io>

ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift

@@ -102,9 +102,12 @@ struct HomeScreen: View {
                 }
             }
         } label: {
-            userAvatarImageView
-                .animation(.elementDefault, value: context.viewState.userAvatar)
-                .transition(.opacity)
+            LoadableAvatarImage(url: context.viewState.userAvatarURL,
+                                name: context.viewState.userDisplayName,
+                                contentID: context.viewState.userID,
+                                avatarSize: .user(on: .home),
+                                imageProvider: context.imageProvider)
+                .accessibilityIdentifier("userAvatarImage")
         }
         .alert(ElementL10n.actionSignOut,
                isPresented: $showingLogoutConfirmation) {
@@ -116,26 +119,6 @@ struct HomeScreen: View {
         }
         .accessibilityLabel(ElementL10n.a11yAllChatsUserAvatarMenu)
     }
-
-    @ViewBuilder
-    private var userAvatarImageView: some View {
-        userAvatarImage
-            .frame(width: AvatarSize.user(on: .home).value, height: AvatarSize.user(on: .home).value, alignment: .center)
-            .clipShape(Circle())
-            .accessibilityIdentifier("userAvatarImage")
-    }
-
-    @ViewBuilder
-    private var userAvatarImage: some View {
-        if let avatar = context.viewState.userAvatar {
-            Image(uiImage: avatar)
-                .resizable()
-                .scaledToFill()
-        } else {
-            PlaceholderAvatarImage(text: context.viewState.userDisplayName ?? context.viewState.userID,
-                                   contentId: context.viewState.userID)
-        }
-    }
     
     private var sessionVerificationBanner: some View {
         VStack(alignment: .leading, spacing: 16) {

ElementX/Sources/Screens/HomeScreen/View/HomeScreenRoomCell.swift

@@ -17,8 +17,6 @@
 import SwiftUI
 
 struct HomeScreenRoomCell: View {
-    @ScaledMetric private var avatarSize = AvatarSize.room(on: .home).value
-    
     let room: HomeScreenRoom
     let context: HomeScreenViewModel.Context
     
@@ -38,11 +36,6 @@ struct HomeScreenRoomCell: View {
             }
             .frame(minHeight: 64.0)
             .accessibilityElement(children: .combine)
-            .task {
-                if let roomId = room.roomId {
-                    context.send(viewAction: .loadRoomData(roomIdentifier: roomId))
-                }
-            }
         }
         .buttonStyle(HomeScreenRoomCellButtonStyle())
         .accessibilityIdentifier("roomName:\(room.name)")
@@ -50,19 +43,12 @@ struct HomeScreenRoomCell: View {
     
     @ViewBuilder
     var avatar: some View {
-        if let avatar = room.avatar {
-            Image(uiImage: avatar)
-                .resizable()
-                .scaledToFill()
-                .frame(width: avatarSize, height: avatarSize)
-                .clipShape(Circle())
-                .accessibilityHidden(true)
-        } else {
-            PlaceholderAvatarImage(text: room.name, contentId: room.roomId)
-                .clipShape(Circle())
-                .frame(width: avatarSize, height: avatarSize)
-                .accessibilityHidden(true)
-        }
+        LoadableAvatarImage(url: room.avatarURL,
+                            name: room.name,
+                            contentID: room.roomId,
+                            avatarSize: .room(on: .home),
+                            imageProvider: context.imageProvider)
+            .accessibilityHidden(true)
     }
     
     @ViewBuilder