Hi, I really need your help. I implemented a simple view with 4 images. These images can be exchanged trough the State var. That works really good. The problem is that there is a significant lag/freeze and CPU usage of the simulator is 100% for a few seconds. All images are local and kompress to about 0.5-1.5Megabyte. I also implemented animation to transition between the image sets. I thought the lag is because of the animation and deleted it... But the lag is still there. I think it is pretty cpu intensive to render 4 images at a time but I found no easy solution to fix this problem.

I've been working on this very problem for several days now and I'm getting very frustrated because I can't get it to work. I hope someone knows how to solve this problem.

Thanks

struct Pictures:View {
    @State var selected:SelectedPoint
    var body: some View {
        HStack{
            VStack{
                Image(selected.viewedItem.picture1)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
                    .overlay(
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(Color("BorderColor"),lineWidth: 1)
                    )
                }

                Image(selected.viewedItem.picture2)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 200)
                    .clipped()
                    .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
                    .overlay(
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(Color("BorderColor"), lineWidth: 1)
                    )
                    .padding(.top,10)
            }
            .padding(.trailing,5)
            VStack{
                Image(selected.viewedItem.picture3)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 200)
                    .clipped()
                    .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
                    .overlay(
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(Color("BorderColor"), lineWidth: 1)
                    )
                    .padding(.bottom,5)

                Image(selected.viewedItem.picture4)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
                    .overlay(
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(Color("BorderColor"),lineWidth: 1)
                    )
                    .padding(.top,5)
            }
            .padding(.leading,5)
        }
        .padding(15)
        .frame(width: 450, height: 440)
        .background(Color("WidgetBackround"))
        .clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
        .overlay(
            RoundedRectangle(cornerRadius: 18)
                .stroke(Color("BorderColor"),lineWidth: 1)
        )
    }
}

Learn from HWS Lessons

Have you completed the HackingWithSwift 100 Days of SwiftUI course?

@twoStraws discusses this very issue in his course!

What part of his lesson didn't you fully understand?

Keep Coding

Also, please help us review your code by indenting it properly. Otherwise, you may not get help because your code is hard to read.

@Obelix Thank you for the info. I corrected the indent. Could you specify the day where the topic is discussed? Thank you very much.