Loading Image from Core Data makes NavigationView transition jumpy

Question

In my SwiftUI app, when the user clicks an item in the List, it takes the user to the details view. In the details view, we need to display an image loaded from Core Data. The image data will be ready before the NavigationView transition finishes, but the NavigationView transition becomes jumpy when the image appears.

Here is the GIF image to see the jumpy transition: https://gph.is/g/aQqBqRA

Please find my code below:

       Image(uiImage: self.currentImage)
            .resizable()
            .aspectRatio(contentMode: .fit)
        }
        .onAppear {
            DispatchQueue.main.async {
                self.currentImage = UIImage(data: issue.photosArray[0].photoData!)!
            }
        }

How can I fix the jumpy transition?

Answer 1

The .onAppear is called before animation start, so your loaded image causes view rebuild during animation, which result in observed effect.

If image cannot be loaded completely before animation, then it is better to postpone it until after animation completed, like

   Image(uiImage: self.currentImage)
        .resizable()
        .aspectRatio(contentMode: .fit)
    }
    .onAppear {
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            self.currentImage = UIImage(data: issue.photosArray[0].photoData!)!
        }
    }