A modern programming language that makes developers happier.

kotlinlang

I wrote a short article on what I think is the best method to display a loader while resources are loading.
<https://kdroidfilter.github.io/blog/2024/resources-loader-compose-web>

<https://github.com/JetBrains/compose-multiplatform/pull/5159|https://github.com/JetBrains/compose-multiplatform/pull/5159>

Since your implementation simply disables the loader once the canvas is being rendered, this can be done in HTML/CSS only. ComposeViewport injects its' canvas into the page, so you can have a loading container element in your html, and as long as it's the `:only-child`, show it. Once the canvas is injected into the page, it will simply disappear.

Minimal example:

```&lt;body&gt;
&lt;div class="container"&gt;
    &lt;svg width="24" height="24" viewBox="0 0 24 24" xmlns="<http://www.w3.org/2000/svg>"&gt;
        &lt;!-- svg content --&gt;
    &lt;/svg&gt;
    &lt;noscript&gt;
        This page requires JavaScript to be enabled.
    &lt;/noscript&gt;
&lt;/div&gt;
&lt;/body&gt;```
```.container {
    display: none;
}

.container:only-child {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 2em;
    justify-content: center;
    align-items: center;
}```
```fun main() {
    ComposeViewport(document.body!!) { 
        App()
    }
}```