Images never load if GeometryReader is used to set its frame width

[ruippeixotog]

Check List

Thanks for considering to open an issue. Before you submit your issue, please confirm these boxes are checked.

• I have read the wiki page and cheat sheet, but there is no information I need.
• I have searched in existing issues, but did not find a same one.
• 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

I have a SwiftUI view with a very simple body:

    var body: some View {
        GeometryReader { geo in
            KFImage(
                URL(string: "https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png")!
            )
                .placeholder { ProgressView() }
                .resizable()
                .scaledToFit()
                .frame(width: geo.size.width)
        }
    }

Unfortunately, this image never loads for me the first time (and I can add .forceRefresh() to reproduce this issue consistently). I added .onProgress and .onSuccess hooks and checked that while the image is downloaded successfully, KF never replaces the placeholder view with the actual image. This doesn't happen if the image is loaded from cache.

This seems to be somehow related to how GeometryReader plays out with KFImage. If I remove GeometryReader, or even just assign a fixed width to the image, the image loads correctly.

Is this a known issue?

[onevcat]

Ummm,

I cannot reproduce this issue in the demo app in this repo.

What is your Kingfisher version or is it an issue only happens on some certain device or iOS version?

I also append a GIF of this, by using forceRefresh as well as manually cleaning the cache to make sure it loads from network.

Is it possible for you to prepare a reproducible sample so we can have a detail look? Thanks!

[ruippeixotog]

@onevcat thanks for checking. I created a minimal iOS project for that and I wasn't able to reproduce it either, so I dug a little bit and found out that the problem only happens when wrapped inside a NavigationView:

            NavigationView {
                GeometryReader { geo in
                    KFImage(
                        URL(string: "https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png")!
                    )
                        .placeholder { ProgressView() }
                        .forceRefresh()
                        .resizable()
                        .scaledToFit()
                        .frame(width: geo.size.width)
                }
            }

I overlooked this in my initial post because NavigationView was applied on the previous list view, sorry for the trouble. Can you reproduce it now?

[ruippeixotog]

Hi @onevcat, did you have a chance to take a second look at it?

[onevcat]

@ruippeixotog Sure! Please give me some more time...Crazy busy recently. T-T

[onevcat]

Hi, @ruippeixotog

I checked this in detail and it is yet another side effect as #1660

I suggest add a .loadImmediately() to make it work for now, until we can drop support of iOS 13 and switch to the @StateObject to have an actual solution.

[onevcat]

Or if you do not like the loadImmediately way, you can extract the image related part of the code and make it "context-free" (which means it does not depend on the geo in its context, so it won't be evaluated again).

NavigationView {
  GeometryReader { geo in
    MyView()
      .frame(width: geo.size.width)
  }
}

struct MyView: View {
  var body: some View {
    KFImage(
      URL(string: "https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png")!
    )
    .placeholder { ProgressView() }
    .forceRefresh()
    .resizable()
    .scaledToFit()
  }
}

Frankly speaking I don't know why the original code works without a NavigationView, but it seems that the NavigationView triggers a re-layout and it is just leading to some internal magic of SwiftUI View's lifetime 😂

[ruippeixotog]

Thanks @onevcat, .loadImmediately() works well for me! Incidentally, it also fixed a similar problem I had when I used .animation(.spring()) on Kingfisher images.

[onevcat]

Nice to hear that. That was too bad the @ObservedObject failed in several places. I really wish we could get rid of that soon.

Thanks for the feedback. Please let me close this for now.