https://kotlinlang.org logo
#compose-web
Title
# compose-web
t

Taha

03/30/2024, 2:24 PM
how can i show a progress bar or some sort of loading text while the web app loads in the browser?
👍 1
m

mohamed rejeb

03/30/2024, 4:02 PM
You can show a loader using compose-html:
Copy code
fun main() {
    var isLoading by mutableStateOf(true)

    renderComposable(
        rootElementId = "root"
    ) {
        if (isLoading)
            Text(value = "Loading")
    }

    onWasmReady {
        CanvasBasedWindow(
            title = "Window title"
        ) {
            LaunchedEffect(Unit) {
                isLoading = false
            }

            Box(Modifier.fillMaxSize()) {
                App()
            }
        }
    }
}
👀 1
t

Taha

03/30/2024, 4:11 PM
hmm im on a compose multiplatform app with all targets, i can't seem to find the
onWasmReady
call so im guessing thats a compose html specific thing.
i just found a way to achive what i want using some CSS and javascript on the index.html file, im a mobile dev so i don't have much experience with web stuff but it works
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Showcase Layout Compose Demo</title>
    <style>
        #loading-indicator {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            background-color: #f0f0f0;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
        }

        .spinner {
            border: 4px solid rgba(0, 100, 105, 1); /* Color set to 0xFF006971 */
            border-left-color: rgba(0, 100, 105, 0.1);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <script type="application/javascript" src="skiko.js"></script>
    <script type="application/javascript" src="composeApp.js"></script>
</head>
<body>
<div id="loading-indicator">
    <!-- Circular loading spinner -->
    <div class="spinner"></div>
</div>
<canvas id="ComposeTarget"></canvas>
<script src="util.js"></script>
<script>
    document.addEventListener("app-loaded", function() {
        document.getElementById("loading-indicator").style.display = "none";
    });
</script>
</body>
</html>
then i call a function to hide the progress bar in a launched effect block
m

mohamed rejeb

03/30/2024, 4:17 PM
This should be fine as well!
The main function is the entry point of the web app, I'm sure you have one in your project.
3 Views