CfW: UI Stuck while loading resource

[JamshedAlamQaderi]

Describe the problem When i load an image using rememberImageBitmap() in k/js it's stucked while image is loading.

• Without the image it's working fine. but when using image then it stucked while images are loading

Affected platforms Select one of the platforms below:

• Web (K/JS) - Canvas based API

If the problem is Android-only, report it in the Jetpack Compose tracker

Versions

• Kotlin version: 1.9.0
• Compose Multiplatform version: 1.5.0-beta01
• OS version(s) (required for Desktop and iOS issues):
• OS architecture (x86 or arm64): MAC ARM64
• JDK (for desktop issues):

Sample code

@OptIn(ExperimentalMaterial3Api::class, ExperimentalResourceApi::class)
@Composable
fun DefaultLayout(title: String = "FM ADMIN", content: @Composable () -> Unit = {}) {
    Scaffold(topBar = {
        TopAppBar(title = {
            Text(title)
        }, actions = {
            IconButton(onClick = {}) {
                Avatar(resource("jamshed_pic.jpg").rememberImageBitmap().orEmpty())
            }
        })
    }) { padding ->
        Box(Modifier.padding(padding)) {
            content.invoke()
        }
    }
}

Reproduction steps Just use an image in compose web project

[eymar]

Do you mean like UI (main) thread is blocked? Could you please share the profile (from Google Chrome profileer for example), so we can see where it gets stuck? You can a find a profiler in Developer Tools -> Performance. Then you can save a profile. Also you can take a screenshot to quickly give an idea what is stuck.

[JamshedAlamQaderi]

i was hovering mouse over the button and after loading the image in the drawer it's come to the working then my hovering works. I think when you import this then you'll find screenshots. Or let me know if you need a video. Or you can visit this app (under development) https://fmadmin.vercel.app

Profile-20230808T115813.json.gz

[eymar]

I see. I noticed the little freeze too. I agree there is something to improve on compose side.

For you to make it less noticeable, you might use a smaller image file. Your image is currently 1.9 MB, which I think is not necessary for a small profile photo. 200 KBytes file should be enough in my opinion (512 x 512?) .

[JamshedAlamQaderi]

Could you just give me an idea what is happening with resource('image.png').rememberImageBitmap() or maybe i think it's problem from toImageBitmap() function because i've tried with readbytes() only it was perfect. When i add toImageBitmap() extension which i've created same as compose does it's stucked while loading.

[eymar]

yes, there is a problem with toImageBitmap it was noticed in other projects too. Smaller images (when possible) should work better.