Glide Loading (Compose)

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun LoadingImage(
    url: String?,
    loadingSize: DpSize = DpSize(100.dp, 100.dp),
    useOriginalSize: Boolean = false,
    placeHolder: @Composable (Modifier) -> Unit,
    contentScale: ContentScale = ContentScale.Fit,
    modifier: Modifier
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier
    ) {
        var isLoaded by remember { mutableStateOf(false) }

        GlideImage(
            model = url,
            contentDescription = "",
            contentScale = contentScale
        ) {
            isLoaded = false
            if (useOriginalSize) it.override(Target.SIZE_ORIGINAL)
            it.listener(object : RequestListener<Drawable> {
                override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Drawable>, isFirstResource: Boolean): Boolean { return true }
                override fun onResourceReady(resource: Drawable, model: Any, target: Target<Drawable>?, dataSource: DataSource, isFirstResource: Boolean): Boolean {
                    isLoaded = true
                    return true
                }
            })
        }

        if (!isLoaded) placeHolder(Modifier)
    }
}

 

Glide에서 이미지가 로딩되는 동안 Loading Composable 표시

drawable은 GlideImage의 loading parameter로 사용할 수 있으나 compose는 deprecated되었기 때문에 구현

 

GlideSubcomposition을 사용할 수도 있음.

https://bumptech.github.io/glide/int/compose.html#recomposition-and-state-changes