Merge pull request #16 from juandahurt/fix

refactor: update image skeleton
payan-app · Jun 11, 2022 · 89b862d · 89b862d
2 parents 856ce1a + 6271002
commit 89b862d
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 20 deletions.
diff --git a/Sources/Purace/Views/Basic/Image/PuraceImageView.swift b/Sources/Purace/Views/Basic/Image/PuraceImageView.swift
@@ -8,23 +8,45 @@
 import Foundation
 import SwiftUI
 import Kingfisher
+import ViewExtractor
 
 public struct PuraceImageView: View {
     let skeletonColor: Color
     let url: URL?
+    let overlayViews: [AnyView]
+
+    @State var hasLoaded = false
 
     public init(url: URL?) {
-        self.skeletonColor = PuraceStyle.Color.allSkeletons.randomElement()!
+        skeletonColor = PuraceStyle.Color.allSkeletons.randomElement()!
+        self.url = url
+        overlayViews = []
+    }
+
+    public init<Content: View>(url: URL?, @ViewBuilder content: NormalContent<Content>) {
+        skeletonColor = PuraceStyle.Color.allSkeletons.randomElement()!
         self.url = url
+        overlayViews = ViewExtractor.getViews(from: content)
     }
 
     public var body: some View {
-        KFImage.url(url)
-            .resizable()
-            .appendProcessor(DownsamplingImageProcessor(size: UIScreen.main.bounds.size))
-            .scaleFactor(UIScreen.main.scale)
-            .placeholder { _ in
-                skeletonColor
-            }
+        ZStack {
+            KFImage.url(url)
+                .resizable()
+                .fade(duration: 0.2)
+                .appendProcessor(DownsamplingImageProcessor(size: UIScreen.main.bounds.size))
+                .scaleFactor(UIScreen.main.scale)
+                .placeholder { _ in
+                    skeletonColor
+                }
+                .onSuccess { _ in
+                    hasLoaded = true
+                }
+            Group {
+                ForEach(overlayViews.indices) { index in
+                    overlayViews[index]
+                }
+            }.opacity(hasLoaded ? 1: 0)
+        }
     }
 }
diff --git a/Sources/Purace/Views/Complex/Collection Card/PuraceCollectionCardView.swift b/Sources/Purace/Views/Complex/Collection Card/PuraceCollectionCardView.swift
@@ -77,19 +77,19 @@ public struct PuraceCollectionCardView: View {
             if cards.isEmpty {
                 EmptyView()
             } else {
-                ZStack(alignment: .center) {
-                    PuraceImageView(url: cards[index].backgroundImage)
-                        .frame(width: getSize(at: index).width, height: getSize(at: index).height)
-                        .aspectRatio(contentMode: .fill)
-                    LinearGradient(gradient: Gradient(colors: [.clear, .black.opacity(0.35)]), startPoint: .top, endPoint: .center)
-                    VStack(alignment: .leading) {
-                        Spacer()
-                        HStack {
-                            PuraceTextView(cards[index].title, fontSize: 12, textColor: .white, weight: .medium)
-                            Spacer(minLength: 0)
-                        }
-                    }.padding()
+                PuraceImageView(url: cards[index].backgroundImage) {
+                    ZStack {
+                        LinearGradient(gradient: Gradient(colors: [.clear, .black.opacity(0.35)]), startPoint: .top, endPoint: .center)
+                        VStack(alignment: .leading) {
+                            Spacer()
+                            HStack {
+                                PuraceTextView(cards[index].title, fontSize: 12, textColor: .white, weight: .medium)
+                                Spacer(minLength: 0)
+                            }
+                        }.padding()
+                    }.frame(width: getSize(at: index).width, height: getSize(at: index).height)
                 }
+                .aspectRatio(contentMode: .fill)
                 .frame(width: getSize(at: index).width, height: getSize(at: index).height)
                 .cornerRadius(5)
                 .opacity(getCardOpacity(forCardAt: index))