Kingfisher: Transitions not working in SwiftUI

[damirstuhec]

Check List

• [x] I have read the wiki page and cheat sheet, but there is no information I need.
• [X] I have searched in existing issues, but did not find a same one.
• [X] I want to report a problem instead of asking a question. It'd better to use kingfisher tag in Stack Overflow to ask a question.

Issue Description

Transitions don't work in SwiftUI.

What

When using any of the .transition options on SwiftUI's KFImage, the transition is not applied. It just instantly shows the image.

Reproduce

struct ContentView: View {
    var body: some View {
        KFImage(URL(string: "https://ev-database.org/img/auto/Tesla_Model_3/Tesla_Model_3-03.jpg")!, options: [.transition(.fade(3))])
    }
}

Other Comment

I've also tried adding .forceTransition, and removing the app (to avoid cached version) with no luck.

Thanks in advance!

[onevcat]

Some options (like transition) is manipulating UIView properties. In a SwiftUI Image, there is no such property to set now. Instead, maybe you can use a SwiftUI's way to implement it yourself, like this.

[onevcat]

Maybe it is a good idea to also make KFImage support this option too. But I doubt if I can find a good way for it now. Let's try!

[onevcat]

I tried to implement a way to support fade-in transition option. However, I cannot reach a satisfying result. By adding the .transition or .opacity inside the KFImage, and mark it as am implicit animation with .animation brings quite a lot undesired side-effect to the view. It (the .animation) is too invasive, such as animating all other animatable properties in the view.

I guess unless we can find a better way, we leave the decision and implementation to the user. Basically it should not be that hard. Some wrapper like this would be a good starting point:

@State var done = false

var body: some View {
  KFImage(url, isLoaded: $done)
    .opacity(done ? 1.0 : 0.3)
    .animation(.linear(duration: 0.4))
}

Also check the sample code for KingfisherSwiftUI in this repo on fading effect.