When in dark mode, Recomposition SwingPanel will flashes

[tangshimin]

https://user-images.githubusercontent.com/16540656/152769994-505a4195-5dae-40ea-892d-8a7153a42b7f.mp4

fun main() = application {
    Window(
        onCloseRequest = ::exitApplication,
    ) {
        MaterialTheme(colors = darkColors()) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Top,
                modifier = Modifier
                    .background(MaterialTheme.colors.background)
                    .fillMaxSize()
            ) {
                var boxVisible by remember { mutableStateOf(false) }
                Button(onClick = { boxVisible = !boxVisible }) {
                    Text(text = "Show Box")
                }
                if (boxVisible) {
                    Box(Modifier.background(Color(0xFF121212)).width(600.dp).height(500.dp).border(1.dp,Color.DarkGray)) {
                        Text("Box Visible is: $boxVisible",color = MaterialTheme.colors.onBackground)
                    }
                }
                var swingVisible by remember{ mutableStateOf(false)}
                Button(onClick = {swingVisible = !swingVisible}){
                    Text(text = "Show SwingPanel")
                }
                if(swingVisible){
                    SwingPanel(
                        background = Color(0xFF121212),
                        modifier = Modifier.width(600.dp).height(500.dp).border(1.dp,Color.DarkGray),
                        factory = {
                            JPanel().apply {
                                background = java.awt.Color(12,12,12)
                                add(JTextArea("SwingPanel Visible is: $swingVisible"))
                            }

                        }
                    )
                }

            }
        }

    }
}

[tangshimin]

How to eliminate the flash?

[xxfast]

I think the flash is actually the swing panel that is in the light mode appearing for a brief second before recomposition kicks in. I've seen this in my own implementation

https://user-images.githubusercontent.com/13775137/156100575-966c0eea-04cc-49f6-91eb-0ee575d5dfcf.mov

A related conversation on slack here, indicates that this is actually a swing issue that is raised here

[m-sasha]

In the reporter's video, the flash seems to be when the SwingPanel is removed. I tested the latest Compose, and there is no flash when it's removed, but there is when it's added!

https://user-images.githubusercontent.com/5230206/227174209-8cee1ea8-c379-42d8-91dc-c1a353efb29e.mp4

[tangshimin]

A white flash also appears when initialize ComposePanel.

fun main() = SwingUtilities.invokeLater {
    val window = JFrame()
    // creating ComposePanel
    val composePanel = ComposePanel()
    window.defaultCloseOperation = WindowConstants.EXIT_ON_CLOSE
    window.title = "SwingComposeWindow"

    window.background = java.awt.Color(12,12,12)
    // addind ComposePanel on JFrame
    window.contentPane.add(composePanel, BorderLayout.CENTER)

    // setting the content
    composePanel.setContent {
        ComposeContent()
    }

    window.setSize(800, 600)
    window.isVisible = true
}

@Composable
fun ComposeContent() {
    Box(
        modifier = Modifier.fillMaxSize().background(Color(0xFF434343)),
        contentAlignment = Alignment.Center
    ) {
        Text("ComposeContent", color = Color.White)
    }
}

https://github.com/JetBrains/compose-multiplatform/assets/16540656/b3dd8d4e-dac9-4ffa-9adf-e7c08e1c7e69

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.