Fixing Stutter When a Rork Max SwiftUI Image Grid Scrolls

Downsample to the display size

The biggest win is decoding the image only after shrinking it to the size you'll actually display. Instead of reading full resolution like UIImage(contentsOfFile:), have ImageIO build a thumbnail so you never expand full resolution into memory.

import ImageIO
import UIKit
 
enum ImageDownsampler {
    /// Generates a thumbnail sized to the given point size.
    /// Because it never expands full resolution, it cuts both memory use and decode time sharply.
    static func thumbnail(at url: URL, pointSize: CGSize, scale: CGFloat) -> CGImage? {
        let sourceOptions = [kCGImageSourceShouldCache: false] as CFDictionary
        guard let source = CGImageSourceCreateWithURL(url as CFURL, sourceOptions) else {
            return nil
        }
        // Match the long edge to the target pixel count
        let maxPixel = max(pointSize.width, pointSize.height) * scale
        let options = [
            kCGImageSourceCreateThumbnailFromImageAlways: true,
            kCGImageSourceShouldCacheImmediately: true,   // finish the decode right here
            kCGImageSourceCreateThumbnailWithTransform: true,
            kCGImageSourceThumbnailMaxPixelSize: maxPixel
        ] as CFDictionary
        return CGImageSourceCreateThumbnailAtIndex(source, 0, options)
    }
}

The key is setting kCGImageSourceShouldCacheImmediately to true. That finishes decoding at thumbnail-generation time, so a decode doesn't fire right before drawing — which keeps the main thread light during scrolling.

Move the decode off the main thread

Downsampling is lighter, but not free. Run it on the main thread during scrolling and it still eats frames. Push it into Task.detached inside .task and bring only the result back to the main actor.

struct WallpaperCell: View, Equatable {
    let item: Wallpaper       // Identifiable
    let side: CGFloat
 
    @State private var image: UIImage?
 
    var body: some View {
        Color(.secondarySystemBackground)
            .overlay {
                if let image {
                    Image(uiImage: image)
                        .resizable()
                        .scaledToFill()
                }
            }
            .frame(width: side, height: side)
            .clipped()
            .task(id: item.id) {        // the previous task is cancelled automatically when the cell is reused
                let target = CGSize(width: side, height: side)
                let scale = UIScreen.main.scale
                let url = item.fileURL
                let cg = await Task.detached(priority: .userInitiated) {
                    ImageDownsampler.thumbnail(at: url, pointSize: target, scale: scale)
                }.value
                if let cg {
                    image = UIImage(cgImage: cg)
                }
            }
    }
 
    static func == (lhs: WallpaperCell, rhs: WallpaperCell) -> Bool {
        lhs.item.id == rhs.item.id && lhs.side == rhs.side
    }
}

Using .task(id: item.id) looks minor but matters. Because LazyVGrid reuses cells, a fast scroll makes one cell view show a string of different items. Pass id: and the previous downsampling task is cancelled the moment the target changes, so you stop spending time decoding images that are no longer on screen. Forget this and, after a hard fling, "decodes of invisible images" keep running in the background and the view stays heavy well after scrolling ends.

Stabilize cells to stop wasted re-renders

On the grid side, keep cells from being rebuilt repeatedly. Make Wallpaper Identifiable with a stable id, and make WallpaperCell Equatable so you tell SwiftUI "don't redraw if it's the same item and size."

struct Wallpaper: Identifiable, Hashable {
    let id: String
    let fileURL: URL
}
 
struct WallpaperGrid: View {
    let items: [Wallpaper]
    private let columns = [GridItem(.adaptive(minimum: 110), spacing: 2)]
 
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 2) {
                ForEach(items) { item in
                    WallpaperCell(item: item, side: 110)
                        .equatable()      // skip re-evaluating body when values are unchanged
                }
            }
            .padding(.horizontal, 2)
        }
    }
}

It's important not to use "array index" as the id. If the generated code uses an index like ForEach(items.indices, id: \.self), every reorder or insert treats cells as different items and forces image reloads. Pass a stable string ID (filename or UUID) through Identifiable and that reloading stops.

Worth noting why to avoid AnyView: generated code sometimes wraps cells in AnyView, but AnyView erases the inner type, so SwiftUI can't tell "is this the same view?" and its diffing optimization loses traction. Passing cells as concrete types is faster — that's the on-the-ground experience.

Finishing touches — a memory ceiling and prefetch

Even with downsampled images, holding every visible one means memory grows the further you scroll. Give an NSCache a hard limit so entries are dropped automatically under memory pressure, which stops the "heavier the further down" effect caused by leaks.

final class ThumbnailCache {
    static let shared = ThumbnailCache()
    private let cache = NSCache<NSString, UIImage>()
 
    private init() {
        cache.countLimit = 200          // max number of thumbnails held at once
    }
 
    func image(for key: String) -> UIImage? { cache.object(forKey: key as NSString) }
    func set(_ image: UIImage, for key: String) { cache.setObject(image, forKey: key as NSString) }
}

If the cell's .task checks this cache first and only generates-and-stores on a miss, returning to a cell you've already seen no longer re-decodes. For prefetching, the realistic move in SwiftUI is to warm "the next few rows" in onAppear and nothing fancier. LazyVGrid has no standard prefetch API, so elaborate look-ahead tends to add more complexity than it's worth. I add downsampling and the cache first, measure, and only consider prefetch if that isn't enough.

One caveat: code you change here gets overwritten if you regenerate with Rork Max. I carve image-loading concerns into independent files like ImageDownsampler and ThumbnailCache, and the generated screens just call into them. That way I can let Rork Max rebuild a screen without losing the optimized parts. I cover where to draw that generate-versus-edit boundary in refactoring patterns for Rork Max generated SwiftUI code. The scrolling mindset carries over to the React Native side too, and reading it alongside designing scroll performance with image caching and prefetch shows the key points across both runtimes.

Where to start

First, take one "before" hitch time ratio in Instruments Animation Hitches. With a number in hand, the effect of adding downsampling is obvious at a glance. In most cases, swapping full-resolution decode for thumbnails is enough to bring back the feel. Add cell stabilization and caching afterward, only as much as measurement says helps. Rather than blaming the generated code as-is, fix one place with measurement attached — that, I've found, is the shortest path to lifting an AI-written foundation to real-app quality.