Hey this should create a Column where each item is...

# compose

[Jan]

Hey this should create a Column where each item is a row with 4 thumbnails:

val files = remember { File(parent).listFiles()!!.toList().chunked(4) }
    LazyColumn {
        items(files.size) {
            Row {
                files[it].forEach { video ->
                    Thumbnail(video, size)
                }
            }
        }
    }

The problem is that the thumbnail thing takes a bit to load however the lazy column either calls the thumbnail method all at once or I'm doing something wrong because it's not loading. If I only take 4 of files it loads a few seconds and its fine

[Jan]

Also I think I'm not doing that right:

@Composable
fun Thumbnail(file: File, size: Dimension) {
    var image: BufferedImage? by remember { mutableStateOf(null) }
    LaunchedEffect(Unit) {

            val picture = FrameGrab.getFrameFromFile(file, 1)
            image = AWTUtil.toBufferedImage(picture)!!
        
    }

    image?.toComposeImageBitmap()?.let { Image(it, "", Modifier.size((size.width / 4).dp, (size.height / 4).dp)) }
}

[Andrey Kulikov]

yes, it is not recommended to emit nothing while your image is loading. it is breaking the logic which LazyColumn is using in order to figure out the amount of items needed to fill the viewport. all items have 0 height -> we can fill ALL the items. and since you have fixed sizes in your use case at least just emit empty Box with the correct size when you don’t yet have an image

[Jan]

Yes that fixed it thanks!

[Zach Klippenstein (he/him) [MOD]]

Also, you can replace your MutableState + LaunchedEffect with a produceState