I did look at that, though it still has global state which is the main reason I'm looking elsewhere.

I'm not sure if that can help, but you can try using re-com. It handles many issues with HTML form inputs.

I was thinking about it, but decided against it explicitly as they still warn they test it only on chrome and performance might suffer on different environments.

No need to use everything from it - you can just study how a particular component is implemented.

Line with (assoc-in @app-db [:available-resource? src] false) is not needed. How do you use the image after it's loaded? It does not appear to be used.

(by "not needed" I meant "has no effect")

Instead of a single sub that does literally everything, I would probably go with a single sub that dispatches an even to load an image. Also, I wouldn't use booleans as markers - I would just store a set of loaded URLs.

Hey 🙂

Err, sorry, this typo has been fixed upstream. assoc-in is meant to be swap app-db assoc-in…

When I create that element and give it a src, the browser (Firefox or Chrome) issues a GET. That’s the side-effect I want.

Hum, you’re right, using a set is a better idea. Thanks 🙂

Yeah, I see that. By the lack of usage I meant that the resulting <img> is not used. Or do you later search for all <img> with a particular src?

nope, I feel like it’d be suboptimal ^^ This temp <img> is only for the side-effect get. Then the subscription returns true or false so you can display the ‘real’, visible image when you’re sure it’s loaded.

(I’ve updated the link in my first msg)

Not sure I follow. Do you use another <img> tag with the same src and only display it when the tmp <img> is loaded?

yes. Does it sound weird? If you have a better idea, I’m in 🙂 anyway, thanks a lot for your comments

Here is how I use this sub: https://github.com/piotr-yuxuan/choose-a-new-phone/blob/db7145885695a86c15dc5e27f72e322c431decac/src/choose_a_new_phone/components/phone_card.cljs#L33-L44

There's still no swap! in your link. 🙂

Oh wow, that's convoluted.

no swap?, Aww, I guess Slack preview is bad.

I followed your link - Slack is not involved.

Hum, weird. Cuz’ I can see it here: https://github.com/piotr-yuxuan/choose-a-new-phone/blob/db7145885695a86c15dc5e27f72e322c431decac/src/choose_a_new_phone/subs.cljs#L22

Line 19

…

^^' I do apologise!

What I think you should do is create a reagent, not re-frame, component. Like img-with-spinner or something. It would exist of a single :img - no need for a placeholder :div. It would have an explicit size so that the size is correct before the image is loaded, but initially its visibility would be set to hidden so that the space is still taken. The spinner would be rendered inside this component and got rid of when the img is loaded.

Another solution would be to split img and spinner - create something like img-with-feedback reagent component that would accept a on-loaded handler.

I'd go with the first solution if you don't need the info on available images in your app-db.

Here is your solution implemented! https://github.com/piotr-yuxuan/choose-a-new-phone/commit/8fe7e9e7f5245383844b75e7ea3b788b32238f5e

Thanks again for your advices @U2FRKM4TW 🙂