[ADD] iOS 13 compatible AsyncImage implementation with cache

AltStore/Views/App Detail/AppDetailView.swift

@@ -8,6 +8,7 @@
 
 import SwiftUI
 import GridStack
+import AsyncImage
 import AltStoreCore
 
 struct AppDetailView: View {
@@ -39,7 +40,7 @@ struct AppDetailView: View {
     }
     
     var body: some View {
-        ObservableScrollView(scrollOffset: self.$scrollOffset) { proxy in
+        ObservableScrollView(scrollOffset: $scrollOffset) { proxy in
             LazyVStack {
                 headerView
                     .frame(height: headerViewHeight)
@@ -86,29 +87,35 @@ struct AppDetailView: View {
     }
     
     var contentView: some View {
-        VStack(alignment: .leading) {
+        VStack(alignment: .leading, spacing: 24) {
             if let subtitle = storeApp.subtitle {
                 Text(subtitle)
                     .multilineTextAlignment(.center)
                     .frame(maxWidth: .infinity)
-                    .padding()
+                    .padding(.horizontal)
             }
             
             if !storeApp.screenshotURLs.isEmpty {
-                screenshotsView
+                // Equatable: Only reload the view if the screenshots change.
+                // This prevents unnecessary redraws on scroll.
+                AppScreenshotsScrollView(urls: storeApp.screenshotURLs)
+                    .equatable()
             }
             
             Text(storeApp.localizedDescription)
                 .lineLimit(6)
-                .padding()
+                .padding(.horizontal)
             
             currentVersionView
+                .padding(.horizontal)
             
             permissionsView
+                .padding(.horizontal)
             
             // TODO: Add review view
             // Only let users rate the app if it is currently installed!
         }
+        .padding(.vertical)
         .background(
             RoundedRectangle(cornerRadius: contentCornerRadius)
                 .foregroundColor(Color(UIColor.systemBackground))
@@ -116,28 +123,6 @@ struct AppDetailView: View {
         )
     }
     
-    var screenshotsView: some View {
-        ScrollView(.horizontal, showsIndicators: false) {
-            HStack {
-                ForEach(storeApp.screenshotURLs) { url in
-                    if #available(iOS 15.0, *) {
-                        AsyncImage(url: url) { image in
-                            image.resizable()
-                        } placeholder: {
-                            Rectangle()
-                                .foregroundColor(.secondary)
-                        }
-                        .aspectRatio(9/16, contentMode: .fit)
-                        .cornerRadius(8)
-                    }
-                }
-            }
-            .padding(.horizontal)
-        }
-        .frame(height: 400)
-        .shadow(radius: 12)
-    }
-    
     var currentVersionView: some View {
         VStack(alignment: .leading, spacing: 8) {
             HStack(alignment: .bottom) {
@@ -169,7 +154,6 @@ struct AppDetailView: View {
                     .foregroundColor(.secondary)
             }
         }
-        .padding()
     }
     
     var permissionsView: some View {
@@ -199,12 +183,5 @@ struct AppDetailView: View {
             
             Spacer()
         }
-        .padding()
     }
 }
-
-//struct AppDetailView_Previews: PreviewProvider {
-//    static var previews: some View {
-//        AppDetailView()
-//    }
-//}

AltStore/Views/App Detail/AppScreenshotsScrollView.swift

@@ -0,0 +1,49 @@
+//
+//  AppScreenshotsScrollView.swift
+//  SideStore
+//
+//  Created by Fabian Thies on 27.11.22.
+//  Copyright © 2022 SideStore. All rights reserved.
+//
+
+import SwiftUI
+import AsyncImage
+
+
+/// Horizontal ScrollView with an asynchronously loaded image for each screenshot URL
+///
+/// The struct inherits the `Equatable` protocol and implements the respective comparisation function to prevent the view from being constantly re-rendered when a `@State` change in the parent view occurs.
+/// This way, the `AppScreenshotsScrollView` will only be reloaded when the parameters change.
+struct AppScreenshotsScrollView: View {
+    let urls: [URL]
+    var aspectRatio: CGFloat = 9/16
+    var height: CGFloat = 400
+    
+    var body: some View {
+        ScrollView(.horizontal, showsIndicators: false) {
+            HStack {
+                ForEach(urls) { url in
+                    AsyncImage(url: url) { image in
+                        image
+                            .resizable()
+                    } placeholder: {
+                        Rectangle()
+                            .foregroundColor(.secondary)
+                    }
+                    .aspectRatio(aspectRatio, contentMode: .fit)
+                    .cornerRadius(8)
+                }
+            }
+            .padding(.horizontal)
+        }
+        .frame(height: height)
+        .shadow(radius: 12)
+    }
+}
+
+extension AppScreenshotsScrollView: Equatable {
+    /// Prevent re-rendering of the view if the parameters didn't change
+    static func == (lhs: AppScreenshotsScrollView, rhs: AppScreenshotsScrollView) -> Bool {
+        lhs.urls == rhs.urls && lhs.aspectRatio == rhs.aspectRatio && lhs.height == rhs.height
+    }
+}