Add a new experimental web-specific API to preload fonts and images resources

[eymar]

Fixes https://youtrack.jetbrains.com/issue/CMP-7565/Add-a-new-experimental-web-specific-API-to-preload-fonts-and-images-resources

Add a new experimental web-specific API to preload fonts and images:

@Composable
fun preloadFont(
    resource: FontResource,
    weight: FontWeight = FontWeight.Normal,
    style: FontStyle = FontStyle.Normal
): State<Font?>

@Composable
fun preloadImageBitmap(
    resource: DrawableResource,
): State<ImageBitmap?>

@Composable
fun preloadImageVector(
    resource: DrawableResource,
): State<ImageVector?>

Using this methods in advance, it's possible to avoid FOUT (flash of unstyled text), or flickering of images/icons.

Usage example:

val font1 by preloadFont(Res.font.Workbench_Regular)
val font2 by preloadFont(Res.font.font_awesome, FontWeight.Normal, FontStyle.Normal)

UseResources() // Main App that uses the above fonts

if (font1 != null && font2 != null) {
    println("Fonts are ready")
} else {
    Box(modifier = Modifier.fillMaxSize().background(Color.White.copy(alpha = 0.8f)).clickable {  }) {
        CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
    }
    println("Fonts are not ready yet")
}

Release Notes

Features - Resources

• Add new API to preload and cache font and image resources on web targets: preloadFont, preloadImageBitmap, preloadImageVector

[terrakok]

wait changes

[terrakok]

Instead of the "nice" I recommend to use a "heavy" word in resource names in the doc