Design/net.ikea.skapa.ui.components/Skeleton

Skeleton

@Composable
fun Skeleton(modifier: Modifier = Modifier, loading: Boolean = true)

Skeleton is a visual component for content being loaded which create the impression of faster, gradual loading.

Parameters

modifier

provide size parameters with the modifier otherwise will fill max size of its container.

loading

if the animation shows loading progress or not

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import kotlinx.coroutines.delay
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.AspectRatioBox
import net.ikea.skapa.ui.components.SkapaAspectRatio
import net.ikea.skapa.ui.components.Skeleton

fun main() { 
   //sampleStart 
   var isLoading by remember { mutableStateOf(true) }
if (isLoading) {
    LaunchedEffect(Unit) {
        while (true) {
            delay(5000L)
            isLoading = false
        }
    }
}
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    AspectRatioBox(aspectRatio = SkapaAspectRatio.Ratio1by1) {
        if (isLoading) {
            Skeleton(modifier = Modifier.fillMaxSize())
        } else {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text(text = "Show Your content")
            }
        }
    }
} 
   //sampleEnd
}