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/RoomScreen/View/RoomHeaderView.swift

@@ -38,24 +38,12 @@ struct RoomHeaderView: View {
     }
 
     @ViewBuilder private var roomAvatar: some View {
-        ZStack(alignment: .bottomTrailing) {
-            roomAvatarImage
-                .clipShape(Circle())
-        }
-        .frame(width: AvatarSize.room(on: .timeline).value, height: AvatarSize.room(on: .timeline).value)
-    }
-
-    @ViewBuilder private var roomAvatarImage: some View {
-        if let avatar = context.viewState.roomAvatar {
-            Image(uiImage: avatar)
-                .resizable()
-                .scaledToFill()
-                .accessibilityIdentifier("roomAvatarImage")
-        } else {
-            PlaceholderAvatarImage(text: context.viewState.roomTitle,
-                                   contentId: context.viewState.roomId)
-                .accessibilityIdentifier("roomAvatarPlaceholderImage")
-        }
+        LoadableAvatarImage(url: context.viewState.roomAvatarURL,
+                            name: context.viewState.roomTitle,
+                            contentID: context.viewState.roomId,
+                            avatarSize: .room(on: .timeline),
+                            imageProvider: context.imageProvider)
+            .accessibilityIdentifier("roomAvatarImage")
     }
 }