Image flash when switching tabs

[brzzdev]

Hi,

I've been using Nuke for a while and I love it, but I noticed that there's a noticible flash when switching between tabs

Nuke.mp4

as compared to say Kingfisher

Kingfisher.mp4

Here's the code for both (url: URL, color: Color):

Nuke:

@MainActor @ViewBuilder
private func NukeImageView() -> some View {
    LazyImage(url: url) { state in
        if let image = state.image {
            image
                .resizable()
                .aspectRatio(contentMode: .fill)
        } else {
            color
        }
    }
}

Kingfisher:

@ViewBuilder
private func KFImageView() -> some View {
    KFImage(url)
        .contentConfigure { image in
            image
                .resizable()
                .aspectRatio(contentMode: .fill)
        }
        .placeholder {
            color
        }
}

I see no flash with the built-in AsyncImage either:

@ViewBuilder
private func ImageView() -> some View {
    AsyncImage(url: url) { image in
        image
            .resizable()
            .aspectRatio(contentMode: .fill)
    } placeholder: {
        color
    }
}

[kean]

Hi, which version of Nuke are you using?

[brzzdev]

The latest, 12.1.1, but definitely saw it earlier.

Happy to go back and see if it's all of 12, if that's useful. Don't think that code would work pre-12 though.

[AgapovOne]

I think we have the same problem.

@PaulDoesDev do you have a demo project to share?

[nikita-bor]

We experience the same behavior with the 12.1.2 Nuke. onAppear() gets triggered inside LazyImage and the check guard viewModel.cachedResponse == nil is true for some reason, although I would expect cachedResponse not be nil. Besides, if I call po pipeline.cache[context!.request] on the same line, some ImageContainer gets printed, which looks suspicious to me because I read it as "There's an image cached in-memory". Besides, if I scroll the grid with images a bit, trigger cachedResponse assignment, and only then switch the tabs — there's no flash

[brzzdev]

Quick and dirty demo app

[kean]

Thanks, @PaulDoesDev. Are there any additional steps needed to repro it? When I switch tabs, it doesn't blink.

I tested on iOS 16.4 and iOS 17.0.

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-06-30.at.10.10.57.mp4

[brzzdev]

In the Simulator, I can get it to happen if I keep switching back and forth between tabs repeatedly. On device though, it happens on every tab switch.

iPhone 14 Pro - 17.0 beta2
iPhone 12 - 16.5.1

[kean]

Yes, I can also see it on the device. It seems like a dropped frame, which is weird because LazyImage has performCacheLookupIfNeeded that was specifically added to make sure cached images are available on the first draw. I haven't looked further into it, but performCacheLookupIfNeeded and isCacheLookupNeeded are the main suspect. I thin it could be simplified, and LazyImage could perform cache lookups on every redraw.

[AgapovOne]

What bothers us in our project is the animation. When I even assign a default animation to lazy image in demo project

LazyImage(url: URL(string: image), transaction: .init(animation: .default))

I get reassigning through red placeholder on every tab change.

I would expect transaction to happen only after loading step, not initial assignment.

[ryangittings]

Same issue here, as above, transition happens everytime which is a massive regression vs v11.

Thanks!

[kean]

Fixed in 12.1.3.