I have a composable that displays an Image (available locally), and my composable observes state of the file path. The application displays the low quality image while loading the full file, and once the full file is properly ready to be displayed, the state updates with the new path. However, on displaying the higher quality image there is a brief flash. How can I eliminate this flash?

Flash effect

I attempted to pre-load the image with DisposableEffect, but this did not work. Using CrossFade reduces the flashiness, but still noticeable.

(filePath is updated in the view model once the file is downloaded and ready to be displayed)
(filePath is never null in this gif demonstration)

Snippet from FileGrid:

val fileViewModel: FileViewModel = hiltViewModel(key = it.fileId)
fileViewModel.setFile(it)
val filePath by fileViewModel.filePath.observeAsState()
        
DisposableEffect(filePath) {
    //still causes flashing
    val request = ImageRequest.Builder(context)
        .data(filePath)
        .build()
    imageLoaderViewModel.imageLoader.enqueue(request)
    onDispose { }
}

FileItemFull(
    fileMetadata = it,
    filePath = filePath
)

FileItemFull composable:

@Composable
fun FileItemFull(
    fileMetadata: FileMetadataDB,
    filePath: String?
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(1f)
                .background(Color.Gray, RoundedCornerShape(8.dp)),
            contentAlignment = Alignment.Center
        ) {
            if (filePath != null) {
                Image(
                    painter = rememberAsyncImagePainter(model = filePath.toUri()),
                    contentDescription = fileMetadata.fileTitle,
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .fillMaxWidth()
                        .aspectRatio(1f)
                )
            } else {
                Text(text = "Loading...", style = MaterialTheme.typography.bodyLarge)
            }
        }

        Text(
            text = fileMetadata.fileTitle,
            style = MaterialTheme.typography.bodyLarge,
            modifier = Modifier.padding(vertical = 4.dp)
        )
        Text(
            text = "Size: ${fileMetadata.fileSize} bytes",
            style = MaterialTheme.typography.bodyMedium
        )
        Text(
            text = "Type: ${fileMetadata.type}",
            style = MaterialTheme.typography.bodyMedium
        )
        Text(
            text = "Owner: ${fileMetadata.fileOwner}",
            style = MaterialTheme.typography.bodyMedium
        )
        Text(
            text = "Date: ${fileMetadata.fileDate}",
            style = MaterialTheme.typography.bodyMedium
        )
    }
}