Hallooo people of Kotlin, I hit a serious lag issu...

# webassembly

[Kaanixir]

Hallooo people of Kotlin, I hit a serious lag issue with a small always-running Compose/Wasm animation.

Stack: Compose Multiplatform Web/Wasm, Kotlin/Wasm in Chrome.
Issue: A shared Compose status dot using rememberInfiniteTransition + animateFloat to drive a radial/glow Canvas effect made the whole page lag: trackpad scroll, tab switching, and tab morph animations all became delayed, very, very laggy
Proof:
- attached vid
- Compose animated dot enabled -> scroll/tabs very laggy
- Same dot made static or moved to DOM/CSS overlay -> smooth

val transition = rememberInfiniteTransition(label = "status-dot")
  val glow by transition.animateFloat(
      0f,
      1f,
      infiniteRepeatable(
          animation = tween(3600, easing = FastOutSlowInEasing),
          repeatMode = RepeatMode.Reverse,
      ),
  )

The infinite Compose animation seems to keep invalidating the frame path. Since the app is effectively one rendered surface, the glow is not isolated like a browser
compositor layer, so it competes with scroll and other animations.

Q:
1. Is this expected for Compose/Wasm today?
2. Can continuous animations be isolated from whole-scene redraw?
3. Are Canvas/radial glow/shadow effects especially expensive on Wasm? how expensive could it be lol
4. Do we need an optimisation in Skiko/Skia/WebGL? Or is DOM/CSS interop currently the practical path for compositor-friendly decorative animations on web?

Refs:
- Compose-side reference:
https://github.com/sdfgsdfgd/backend/blob/main/dashboard/src/commonMain/kotlin/net/sdfgsdfg/dashboard/DashboardApp.kt#L1438-L1554
- Wasm DOM bridge:
https://github.com/sdfgsdfgd/backend/blob/main/dashboard/src/wasmJsMain/kotlin/net/sdfgsdfg/dashboard/PlatformStatusDot.wasmJs.kt#L32-L88
- CSS animation:
https://github.com/sdfgsdfgd/backend/blob/main/dashboard/web/src/wasmJsMain/resources/styles.css#L24-L141

Attached
vid1: recorded with compose animations enabled
vid2: recorded with compose anims disabled, replaced by CSS animations

without_issue.movwith_issue.mov

[Rey (Kingg22)]

Do you fill an issue in youtrack?

[Kaanixir]

yes 🧑‍🍳

[Kaanixir]

like and comment on my issue pls:
https://youtrack.jetbrains.com/issue/CMP-10241/Compose-Wasm-continuous-Canvas-glow-animation-causes-whole-page-scroll-and-tab-jank

subscribe and follow me for more endless issues

[Winson Chiu]

Are you sure this isn't just a Compose performance problem? You're reading the animation value inside composition, causing it to recompose every frame. If you defer the state read into the draw phase, does that improve things?

[Kaanixir]

no @Winson Chiu - you can reproduce this stutter with a stock Liquid Glass Compose Multiplatform library applied on a WASM component as well.

Just slap it on any Box, and display it while scrolling the page, you will experience heavy lags when you're scrolling the page. Exactly the same thing I'm reproducing here with a simple animation that displays an animated glow

Precisely the same thing happens
The animated value is consumed inside the Canvas { ... } draw lambda, where it affects draw parameters like gradient alpha/radius. It is not used to build layout/modifiers/content, so this should already be a draw-phase read.


So it has nothing to do with proper implementation of compose or animations IMO

[Winson Chiu]

Oh, I see, I was looking at the wrong rememberInfiniteTransition call. Yeah, the Canvas one looks correct, it must be Wasm related.

[Kaanixir]

the issue creation was so helpful btw ! related tickets are being worked on, having this visibility over them, as people linked to related tickets in the issue I created, is fantastic. Thx again, WASM is really getting there !!!!!! 🚀🧑‍🌾 🚀🚀🚀🚀🚀🚀🚀