Using loadImage inside a ListAdapter onBindViewHolder

[vbsteven]

I'm trying to use AvatarView-Coil to load images inside of a ListAdapter with a ViewHolder and I'm seeing weird behavior.

Essentially in onBindViewHolder I use loadImage to load a profile picture with a String url in an AvatarView. The initial load runs fine and displays the images. Once I reload data in the adapter onBindViewHolder gets called again, but then the images are not loaded or displayed anymore.

        holder.intialsView.loadImage(favourite.contact.profilePhoto,
            onSuccess = { _, _ ->
                logi("###### onsuccess ${favourite.contact.profilePhoto}")
                holder.intialsView.avatarInitials = null
            },
            onStart = {
                logi("## loading contact profile picture for ${favourite.displayName}: ${favourite.contact.profilePhoto}")
            }, onComplete = {
                logi("## oncomplete ${favourite.contact.profilePhoto}")
            }, onError = { _, _ ->
                logi("## error getting profile picture ${favourite.contact.profilePhoto}")
                holder.intialsView.avatarInitials = favourite.displayName.extractInitials()
            })

The first time it runs it outputs this:

2022-02-24 22:22:41.920 8701-8701/com.myapp I/FavouritesAdapter: ############## onBindViewHolder for User1 
2022-02-24 22:22:41.925 8701-8701/com.myapp I/FavouritesAdapter: ## loading contact profile picture for User1: https://placekitten.com/200/200
2022-02-24 22:22:41.925 8701-8701/com.myapp I/FavouritesAdapter: ## oncomplete https://placekitten.com/200/200
2022-02-24 22:22:41.927 8701-8701/com.myapp I/FavouritesAdapter: ## loading contact profile picture for User1: https://placekitten.com/200/200
2022-02-24 22:22:41.937 8701-8701/com.myapp I/FavouritesAdapter: ############## onBindViewHolder for User2
2022-02-24 22:22:41.938 8701-8701/com.myapp I/FavouritesAdapter: ## loading contact profile picture for User2: https://placekitten.com/200/200
2022-02-24 22:22:41.939 8701-8701/com.com.myapp I/FavouritesAdapter: ## oncomplete https://placekitten.com/200/200
2022-02-24 22:22:41.940 8701-8701/com.myapp I/FavouritesAdapter: ## loading contact profile picture for User2: https://placekitten.com/200/200
2022-02-24 22:22:41.992 8701-8813/com.myapp I/Builder: ## Loading image from : https://placekitten.com/200/200
2022-02-24 22:22:41.993 8701-8868/com.myapp I/Builder: ## Loading image from : https://placekitten.com/200/200
2022-02-24 22:22:42.180 8701-8701/com.myapp I/FavouritesAdapter: ###### onsuccess https://placekitten.com/200/200
2022-02-24 22:22:42.181 8701-8701/com.myapp I/FavouritesAdapter: ###### onsuccess https://placekitten.com/200/200
2022-02-24 22:22:42.298 8701-8701/com.myapp I/FavouritesAdapter: ## oncomplete https://placekitten.com/200/200
2022-02-24 22:22:42.298 8701-8701/com.myapp I/FavouritesAdapter: ## oncomplete https://placekitten.com/200/200

The Loading image from... statements are from the ImageLoader requestInterceptor

Then, a bit later when reloading the data it outputs this:

2022-02-24 22:22:47.306 8701-8701/com.myapp I/FavouritesAdapter: ############## onBindViewHolder for User1
2022-02-24 22:22:47.308 8701-8701/com.myapp I/FavouritesAdapter: ## loading contact profile picture for User1 https://placekitten.com/200/200
2022-02-24 22:22:47.309 8701-8701/com.myapp I/FavouritesAdapter: ## oncomplete https://placekitten.com/200/200
2022-02-24 22:22:47.311 8701-8701/com.myapp I/FavouritesAdapter: ## loading contact profile picture for User1: https://placekitten.com/200/200
2022-02-24 22:22:47.312 8701-8701/com.myapp I/FavouritesAdapter: ## oncomplete https://placekitten.com/200/200
2022-02-24 22:22:47.325 8701-8701/com.myapp I/FavouritesAdapter: ############## onBindViewHolder for User2
2022-02-24 22:22:47.327 8701-8701/com.myapp I/FavouritesAdapter: ## loading contact profile picture for User2: https://placekitten.com/200/200
2022-02-24 22:22:47.328 8701-8701/com.myapp I/FavouritesAdapter: ## oncomplete https://placekitten.com/200/200
2022-02-24 22:22:47.330 8701-8701/com.myapp I/FavouritesAdapter: ## loading contact profile picture for User2: https://placekitten.com/200/200
2022-02-24 22:22:47.330 8701-8701/com.myapp I/FavouritesAdapter: ## oncomplete https://placekitten.com/200/200

The weird behavior I'm seeing is this:

• the onStart seems to be fired twice when I call loadImage
• the onComplete fires twice as well, once immediately after the first onStart, and a second time after onSuccess.
• on the second run after rebinding the data, onStart is fired twice again
• onComplete fires twice again, both immediately after the onStart
• no Loading image from on the second run, presumably because of caching in the ImageLoader
• on this second run onSuccess is never called (also because of caching?)
• on this second run no images are displayed.

Am I misunderstanding the api or could this be a bug? I expected each call to loadImage to result in only one call to onStart and one call to onComplete/onSuccess and the images to be displayed after onComplete.

I'm using io.getstream:avatarview-coil:1.0.3

[skydoves]

Hi @vbsteven, Thank you for reporting this issue with a very detailed explanation!

I just checked a few things about your reports below.

• Multiple invoking of the onBindViewHolder method breaks the image - I built this on another branch and it works fine and it's hard to reproduce to me. So could you check out this branch is the same as your codebase?

• onStart and onComplete listeners are being called twice - I guess this is because the library has an internal image loader and it fires the onStart and onComplete listeners twice while loading an image. I'll look into it more for this.

Thanks!

[Teju068]

I am also facing the same issue, Still not resolved. tried same as your approach

[ShivaniWani]

I am also facing the same issue. It is still not resolved. I was using io.getstream:avatarview-coil:1.0.3 then I updated the version to io.getstream:avatarview-coil:1.0.4 now but issue is same.

[Teju068]

Hi @ShivaniWani I fixed with one hacky Solution for now First set the initials="" then set the new Image url it works