Is It Possible To Disable Animations On Already Saved LazyImages?

[mergesort]

Hi there, I'm new to Nuke so apologies if I missed this but I tried reading through all the docs, the repo, played with the Nuke Demo project, and have tried to integrate Nuke into my project directly, but still had trouble figuring out a way to achieve this effect.

I was wondering if there's a way to only show a fade in animation when an image is not already cached, or another way of putting that is to not show any animation when an image is already cached. This is common in apps with long scrolling lists, you can think of timeline-based apps like Twitter, Facebook, etc. In my app a user will be scrolling through a long list of cached links, like this as well.

Right now I'm creating a LazyImage, and have added a slight animation to make the image loading visible to a user.

LazyImage(url: imageURL)
    .animation(.easeIn(duration: 0.1))

I could specify .animation(nil) to have no animation, but then there wouldn't be the nice effect when an image is being loaded asynchronously, and it would be a more jarring experience for the user.

LazyImage(url: imageURL)
    .animation(nil)

When Nuke has already cached the image to disk (as I believe LazyImage is doing), there isn't any load time so I'd like for there to be no animation, but to still have the animation occur when the image is being fetched remotely.

To try my hand at that I thought I could use the pipeline's cache and control the animation based on that, but that also didn't work.

struct LinkImageView: View {
    private let pipeline = ImagePipeline {
        $0.dataLoader = {
            let config = URLSessionConfiguration.default
            config.urlCache = nil
            return DataLoader(configuration: config)
        }()
    }

    let imageURL: URL

    var body: some View {
        LazyImage(url: imageURL)
            .pipeline(pipeline)
            .animation(self.pipeline.cache.containsData(for: ImageRequest(url: imageURL)) ? nil : .easeIn(duration: 5.0))
    }
}

I was wondering if this is possible through one of the primitives you've built, like a processor, the image cache itself, or something else I'm not considering.

Thanks again for the library, and for all your hard work!

[mergesort]

For anyone coming to this later I ended up figuring out a solution. I was pretty close yet still far, instead of creating a pipeline in the View I used the shared pipeline (or I believe I could make my own) and then checked against the cache in the View with the LazyImage. 😅

// Inside your App.Swift or somewhere more global than the view using the image
ImagePipeline.shared = ImagePipeline(configuration: .withDataCache(name: "com.xxx.xxx.xxx", sizeLimit: limit))

struct LinkImageView: View {
    let imageURL: URL

    var body: some View {
        LazyImage(url: imageURL)
            .animation(ImagePipeline.shared.cache.containsData(for: ImageRequest(url: imageURL)) ? nil : .easeIn(duration: 0.1))
    }
}

[kean]

I usually add prefetch to lists. If the image is available in the disk cache, the prefetcher puts it in the memory cache. This way, by the time the user reaches the image, it'll be in the memory cache -> no animation. Accessing the disk on the main thread is generally not recommended, especially in the scroll views.