How to optimize recompose of google map markers wi...

# compose

[Shafayat Bin Mamun]

How to optimize recompose of google map markers with image downloaded?

[Shafayat Bin Mamun]

@Composable
fun CustomMarker(
    blipsList: List<Blip>,
    iconMap: MutableMap<String, Bitmap>,
    hasImageLoaded: Boolean,
    event: (HomeEvents) -> Unit,
    markerClick: (blipId: String) -> Unit
) {
    val context = LocalContext.current
    val iconGenerator = IconGenerator(context)
    val inflatedView = View.inflate(context, R.layout.custom_marker, null)
    val userImage = inflatedView.findViewById<ImageView>(R.id.userImageView)

    iconGenerator.setBackground(null)
    iconGenerator.setContentView(
        inflatedView
    )
    for (blip in blipsList) {
        Glide.with(LocalContext.current)
            .asDrawable()
            .circleCrop()
            .load("${Constants.BASE_URL}${blip.user.photo}")
            .into(object : CustomTarget<Drawable>() {
                override fun onLoadFailed(errorDrawable: Drawable?) {
                    super.onLoadFailed(errorDrawable)
                    val resource =
                        AppCompatResources.getDrawable(context, R.drawable.person)?.toBitmap()
                    val circularBitmapDrawable =
                        RoundedBitmapDrawableFactory.create(context.resources, resource)
                    circularBitmapDrawable.isCircular = true
                    userImage.setImageDrawable(circularBitmapDrawable)
                    iconMap[blip.id] = iconGenerator.makeIcon()
                    if (iconMap.size == blipsList.size) {
                        event(
                            HomeEvents.UserImageLoadedEvent(
                                true
                            )
                        )
                    }
                }

                override fun onResourceReady(
                    resource: Drawable,
                    transition: Transition<in Drawable>?
                ) {
                    userImage.setImageDrawable(resource)
                    iconMap[blip.id] = iconGenerator.makeIcon()
                    if (iconMap.size == blipsList.size) {
                        event(
                            HomeEvents.UserImageLoadedEvent(
                                true
                            )
                        )
                    }
                }

                override fun onLoadCleared(placeholder: Drawable?) {

                }

            })
    }
    if (hasImageLoaded) {
        for ((i, blip) in blipsList.withIndex()) {
            Marker(
                state = MarkerState(
                    LatLng(blip.lat, blip.lng)
                ),
                icon = BitmapDescriptorFactory.fromBitmap(
                    iconMap[blip.id] ?: iconGenerator.makeIcon()
                ),
                tag = i,
                onClick = { mark ->
                    Log.v("Blip", blipsList[mark.tag as Int].id)
                    markerClick.invoke(blipsList[mark.tag as Int].id)
                    return@Marker true
                }
            )
        }
    }
}

[Shafayat Bin Mamun]

Basically what I am doing here is downloading the images from server and making an icon with the icon generator. After all the icons has been fully generated then I am putting the markers in the map. But from large list of markers it will take too much time to draw the markers. So how to do this in an optimized way?

[Shafayat Bin Mamun]

I tried to recompose the markers each the image is downloaded but it got stuck in infinite recompose.