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/TimelineSenderAvatarView.swift

@@ -18,29 +18,19 @@ import Foundation
 import SwiftUI
 
 struct TimelineSenderAvatarView: View {
-    let timelineItem: EventBasedTimelineItemProtocol
-
+    @EnvironmentObject private var context: RoomScreenViewModel.Context
     @ScaledMetric private var avatarSize = AvatarSize.user(on: .timeline).value
-
+    
+    let timelineItem: EventBasedTimelineItemProtocol
+        
     var body: some View {
-        ZStack(alignment: .center) {
-            if let avatar = timelineItem.sender.avatar {
-                Image(uiImage: avatar)
-                    .resizable()
-                    .scaledToFill()
-                    .overlay(Circle().stroke(Color.element.accent))
-            } else {
-                PlaceholderAvatarImage(text: timelineItem.sender.displayName ?? timelineItem.sender.id,
-                                       contentId: timelineItem.sender.id)
-            }
-        }
-        .clipShape(Circle())
-        .frame(width: avatarSize, height: avatarSize)
-        .overlay(
-            Circle()
-                .stroke(Color.element.background, lineWidth: 3)
-        )
-
-        .animation(.elementDefault, value: timelineItem.sender.avatar)
+        LoadableAvatarImage(url: timelineItem.sender.avatarURL,
+                            name: timelineItem.sender.displayName,
+                            contentID: timelineItem.sender.id,
+                            avatarSize: .user(on: .timeline),
+                            imageProvider: context.imageProvider)
+            .overlay(
+                Circle().stroke(Color.element.background, lineWidth: 3)
+            )
     }
 }