https://kotlinlang.org logo
Join Slack
Powered by
how can i show a progress bar or some sort of load...
# compose-web
t
how can i show a progress bar or some sort of loading text while the web app loads in the browser?
👍 1
m
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
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
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.
19 Views
Open in Slack
PreviousNext
Powered by