Can't display images with shadows and scroll smoothly

Question

My app involves displaying <100 image thumbnails and for some reason my iPad Pro 2018 is struggling to scroll through the images smoothly. I recreated a simplified example below. The image is 200px square.

Replacing the images with colored rectangles eliminates the lag. Removing the shadow also removes the lag. I think rendering 50 images with a shadow should be within my device's capabilities, but let me know if anyone disagrees.

struct ContentView: View {
        
    var body: some View {
        ScrollView(.vertical, showsIndicators: false, content: {

            let gridLayout = [(GridItem(.adaptive(minimum: 160)))]

            LazyVGrid(columns: gridLayout, spacing: 8) {
                ForEach(0..<50) { index in
                    Image("cookie_200")
                        .resizable()
                        .aspectRatio(1.0, contentMode: .fit)
                        .padding(8)
                        .shadow(radius: 4)
                }
            }
        })
    }
}

Question Is there a less performance-intensive way to show these thumbnails?

Screen capture with shadow (laggy scroll): https://share.icloud.com/photos/04eFNISH1khfkFqgAmGfGJJZw

Screen capture without shadow (smooth): https://share.icloud.com/photos/02etl7kVG30Cnc6cr_dwSJK-Q

Image:

Answer 1

Shadows and transparency make the runtime do a lot of work. Hence the lag.

Question Is there a less performance-intensive way to show these thumbnails?

Yes. Instead of making the runtime draw the shadows, you draw the shadows. In particular you make an image consisting of the thumbnail and the shadow, on an opaque background the same color as your view background. Now scrolling is perfectly performant.