Merge pull request #1565 from DimensionDev/feature/swiftui_performance

optimize swiftui performance

Author: Tlaster

compose-ui/src/iosMain/kotlin/dev/dimension/flare/ui/presenter/SettingsPresenter.kt

@@ -9,7 +9,9 @@ import dev.dimension.flare.data.model.TabSettings
 import dev.dimension.flare.data.repository.SettingsRepository
 import dev.dimension.flare.ui.model.UiState
 import dev.dimension.flare.ui.model.collectAsUiState
+import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
 import org.koin.core.component.KoinComponent
 import org.koin.core.component.inject
 
@@ -31,19 +33,25 @@ public class SettingsPresenter :
 
             override fun updateAppearanceSettings(block: AppearanceSettings.() -> AppearanceSettings) {
                 scope.launch {
-                    repository.updateAppearanceSettings(block)
+                    withContext(Dispatchers.Main) {
+                        repository.updateAppearanceSettings(block)
+                    }
                 }
             }
 
             override fun updateAppSettings(block: AppSettings.() -> AppSettings) {
                 scope.launch {
-                    repository.updateAppSettings(block)
+                    withContext(Dispatchers.Main) {
+                        repository.updateAppSettings(block)
+                    }
                 }
             }
 
             override fun updateTabSettings(block: TabSettings.() -> TabSettings) {
                 scope.launch {
-                    repository.updateTabSettings(block)
+                    withContext(Dispatchers.Main) {
+                        repository.updateTabSettings(block)
+                    }
                 }
             }
         }

iosApp/flare/UI/Component/MediaView.swift

@@ -6,55 +6,35 @@ import AVFoundation
 
 struct MediaView: View {
     let data: UiMedia
-    let expandToFullSize: Bool
 
-    init(data: UiMedia, expandToFullSize: Bool = false) {
+    init(data: UiMedia) {
         self.data = data
-        self.expandToFullSize = expandToFullSize
     }
 
     var body: some View {
-        switch onEnum(of: data) {
-        case .image(let image):
-            AdaptiveSizeMediaContainerView(
-                expandToFullSize: expandToFullSize
-            ) {
-                NetworkImage(data: image.previewUrl)
-            }
-        case .video(let video):
-            MediaVideoView(data: video, expandToFullSize: expandToFullSize)
-        case .gif(let gif):
-            AdaptiveSizeMediaContainerView(
-                expandToFullSize: expandToFullSize
-            ) {
-                NetworkImage(data: gif.url)
+        ZStack {
+            switch onEnum(of: data) {
+            case .image(let image):
+                Color.gray
+                    .opacity(0.2)
+                    .overlay {
+                        NetworkImage(data: image.previewUrl)
+                            .allowsHitTesting(false)
+                    }
+                    .clipped()
+            case .video(let video):
+                MediaVideoView(data: video)
+            case .gif(let gif):
+                Color.gray
+                    .opacity(0.2)
+                    .overlay {
+                        NetworkImage(data: gif.url)
+                            .allowsHitTesting(false)
+                    }
+                    .clipped()
+            case .audio(let audio):
+                EmptyView()
             }
-        case .audio(let audio):
-            EmptyView()
-        }
-    }
-}
-
-struct AdaptiveSizeMediaContainerView<Content: View>: View {
-    let expandToFullSize: Bool
-    @ViewBuilder let content: () -> Content
-    
-    init(expandToFullSize: Bool, @ViewBuilder content: @escaping () -> Content) {
-        self.expandToFullSize = expandToFullSize
-        self.content = content
-    }
-    
-    var body: some View {
-        if expandToFullSize {
-            content()
-        } else {
-            Color.gray
-                .opacity(0.2)
-                .overlay {
-                    content()
-                        .allowsHitTesting(false)
-                }
-                .clipped()
         }
     }
 }
@@ -68,7 +48,6 @@ struct MediaVideoView: View {
     @State private var time: CMTime = .zero
     @State private var isAppeared: Bool = false
     let data: UiMediaVideo
-    let expandToFullSize: Bool
 
     func canPlay() -> Bool {
         switch themeSettings.appearanceSettings.videoAutoplay {
@@ -82,11 +61,13 @@ struct MediaVideoView: View {
     }
 
     var body: some View {
-        AdaptiveSizeMediaContainerView(
-            expandToFullSize: expandToFullSize
-        ) {
-            NetworkImage(data: data.thumbnailUrl)
-        }
+        Color.gray
+            .opacity(0.2)
+            .overlay {
+                NetworkImage(data: data.thumbnailUrl)
+                    .allowsHitTesting(false)
+            }
+            .clipped()
         .overlay {
             VideoPlayer(url: .init(string: data.url)!, play: $play, time: $time)
                 .mute(true)

iosApp/flare/UI/Component/NetworkImage.swift

@@ -6,7 +6,8 @@ struct NetworkImage: View {
     let placeholder: URL?
     let customHeader: [String: String]?
     var body: some View {
-        KFAnimatedImage(data)
+        KFImage(data)
+            .resizable()
             .requestModifier({ request in
                 if let customHeader {
                     for (key, value) in customHeader {

iosApp/flare/UI/Component/Status/StatusActionView.swift

@@ -10,13 +10,10 @@ struct StatusActionsView: View {
         HStack {
             ForEach(0..<data.count, id: \.self) { index in
                 let item = data[index]
+                if index == data.count - 1 {
+                    Spacer()
+                }
                 StatusActionView(data: item, useText: useText, isFixedWidth: index != data.count - 1)
-                    .if(index == data.count - 1) { view in
-                        view.frame(maxWidth: .infinity, alignment: .trailing)
-                    } else: { view in
-                        view
-                    }
-
             }
         }
         .backport
@@ -92,7 +89,8 @@ struct StatusActionView: View {
                 }
             }
         case .asyncActionItem(let asyncItem):
-            AsyncStatusActionView(data: asyncItem)
+            EmptyView()
+//            AsyncStatusActionView(data: asyncItem)
         }
     }
 }
@@ -259,54 +257,37 @@ struct StatusActionIcon: View {
     let item: StatusActionItem
 
     var body: some View {
-        Group {
-            switch onEnum(of: item) {
-            case .bookmark(let bookmarked):
-                if bookmarked.bookmarked {
-                    Image("fa-bookmark.fill")
-                } else {
-                    Image("fa-bookmark")
-                }
-
-            case .delete:
-                Image("fa-trash")
-
-            case .like(let liked):
-                if liked.liked {
-                    Image("fa-heart.fill")
-                } else {
-                    Image("fa-heart")
-                }
-
-            case .more:
-                Image("fa-ellipsis")
-
-            case .quote:
-                Image("fa-quote-left")
-
-            case .reaction(let reacted):
-                if reacted.reacted {
-                    Image("fa-minus")
-                } else {
-                    Image("fa-plus")
-                }
-
-            case .reply:
-                Image("fa-reply")
-
-            case .report:
-                Image("fa-circle-info")
-
-            case .retweet:
-                Image("fa-retweet")
+        Image(item.imageName)
+    }
+}
 
-            case .comment:
-                Image("fa-comment-dots")
-            case .share:
-                Image(.faShareNodes)
-            case .fxShare:
-                Image(.faShareNodes)
-            }
+extension StatusActionItem {
+    var imageName: String {
+        switch onEnum(of: self) {
+        case .bookmark(let bookmarked):
+            return bookmarked.bookmarked ? "fa-bookmark.fill" : "fa-bookmark"
+        case .delete:
+            return "fa-trash"
+        case .like(let liked):
+            return liked.liked ? "fa-heart.fill" : "fa-heart"
+        case .more:
+            return "fa-ellipsis"
+        case .quote:
+            return "fa-quote-left"
+        case .reaction(let reacted):
+            return reacted.reacted ? "fa-minus" : "fa-plus"
+        case .reply:
+            return "fa-reply"
+        case .report:
+            return "fa-circle-info"
+        case .retweet:
+            return "fa-retweet"
+        case .comment:
+            return "fa-comment-dots"
+        case .share:
+            return "fa-share-nodes"
+        case .fxShare:
+            return "fa-share-nodes"
         }
     }
 }

iosApp/flare/UI/Component/Status/StatusMediaView.swift

@@ -20,7 +20,7 @@ struct StatusMediaView: View {
         ) {
             ForEach(0..<data.count, id: \.self) { index in
                 let item = data[index]
-                MediaView(data: item, expandToFullSize: themeSettings.appearanceSettings.expandMediaSize && data.count == 1)
+                MediaView(data: item)
                     .onTapGesture {
                         if !sensitive || !isBlur {
                             selectedIndex = index

iosApp/flare/UI/Component/Status/StatusView.swift

@@ -11,7 +11,6 @@ struct StatusView: View {
     let withLeadingPadding: Bool
     let showMedia: Bool
     @State private var expand = false
-    @State private var expandMedia = false
     private var showAsFullWidth: Bool {
         (!themeSettings.appearanceSettings.fullWidthPost || withLeadingPadding) && !isQuote && !isDetail
     }
@@ -148,23 +147,7 @@ struct StatusView: View {
                         }
 
                         if !data.images.isEmpty, showMedia {
-                            if themeSettings.appearanceSettings.showMedia || expandMedia {
-                                StatusMediaView(data: data.images, sensitive: !(themeSettings.appearanceSettings.showSensitiveContent) && data.sensitive)
-                            } else {
-                                Button {
-                                    withAnimation {
-                                        expandMedia = true
-                                    }
-                                } label: {
-                                    Label {
-                                        Text("show_media_button", comment: "Button to show media attachments" )
-                                    } icon: {
-                                        Image("fa-image")
-                                    }
-                                }
-                                .backport
-                                .glassButtonStyle(fallbackStyle: .bordered)
-                            }
+                            StatusMediaContent(data: data.images, sensitive: data.sensitive)
                         }
 
                         if let card = data.card, showMedia, data.images.isEmpty, data.quote.isEmpty, themeSettings.appearanceSettings.showLinkPreview {
@@ -212,12 +195,12 @@ struct StatusView: View {
                         }
                     }
                 }
-                .if(!isDetail) { view in
-                    view
-                        .contextMenu {
-                            StatusActionsView(data: data.actions, useText: true)
-                        }
-                }
+//                .if(!isDetail) { view in
+//                    view
+//                        .contextMenu {
+//                            StatusActionsView(data: data.actions, useText: true)
+//                        }
+//                }
             }
         }
         .contentShape(.rect)
@@ -245,6 +228,32 @@ struct StatusView: View {
     }
 }
 
+struct StatusMediaContent: View {
+    @Environment(\.themeSettings) private var themeSettings
+    @State private var expandMedia = false
+    let data: [any UiMedia]
+    let sensitive: Bool
+    var body: some View {
+        if themeSettings.appearanceSettings.showMedia || expandMedia {
+            StatusMediaView(data: data, sensitive: !(themeSettings.appearanceSettings.showSensitiveContent) && sensitive)
+        } else {
+            Button {
+                withAnimation {
+                    expandMedia = true
+                }
+            } label: {
+                Label {
+                    Text("show_media_button", comment: "Button to show media attachments" )
+                } icon: {
+                    Image("fa-image")
+                }
+            }
+            .backport
+            .glassButtonStyle(fallbackStyle: .bordered)
+        }
+    }
+}
+
 extension StatusView {
     init(data: UiTimeline.ItemContentStatus, isDetail: Bool) {
         self.data = data