1

I just started to use Kingfisher to display web images using SwiftUI. However, I seem to have a problem when the image is inside an animated view.

I have a side menu that slides in from the left with a user's profile picture on my app. When using SiftUI's default Image, the image follows the sidebar when appearing on the screen. However, when using Kingfisher, the picture directly appears at its final destination. It does not slide in with the rest of the view.

Example

Here is the code for my profile picture View

struct ProfilePictureView: View {
  let user: User?
  let size: CGFloat

  var body: some View {
    let hasProfilePicture = !(user?.profilePicture?.path?.isEmpty ?? true)
    
    return VStack {
        if (hasProfilePicture) {
            KFImage.url(URL(string: (user?.profilePicture?.path)!))
                .resizable()
                .clipShape(Circle())
                .aspectRatio(contentMode: .fit)
                .frame(width: size, height: size)
        } else {
            Image("paw")
                .resizable()
                .clipShape(Circle())
                .aspectRatio(contentMode: .fit)
                .frame(width: size, height: size)
        }
    }
  }
}

The side menu itself appears using the withAnimation function.

Would any of you have suggestions or solutions for the problem I'm having?

Progman
  • 16,827
  • 6
  • 33
  • 48
Rigaux
  • 49
  • 1
  • 8
  • I'd suggest you to add the code with the default image that works, so we can compare and see what could be missing – Juan Medina Apr 08 '21 at 11:29
  • @JuanMedina, the default image is the "paw" image. If the user has no profile picture, the "paw" image shows by default. – Rigaux Apr 08 '21 at 12:34

1 Answers1

1

Just add .loadImmediately() to the images, this will make them animate smoothly like you want.

So for you it should look like this:

KFImage.url(URL(string: (user?.profilePicture?.path)!))
            .loadImmediately()
            .resizable()
            .clipShape(Circle())
            .aspectRatio(contentMode: .fit)
            .frame(width: size, height: size)
Jake12345
  • 47
  • 6