Flickering when adding an element into the DOM

[shirakaba]

Reported on the Svelte Discord, on the #nativedev channel by user _nothing, who had just been experimenting with svelte-nodegui-starter:

https://user-images.githubusercontent.com/14055146/110186231-7d30f580-7e0c-11eb-975d-a9b3ce8a4426.mov

I tried out svelte-nodegui and got it running! Any tips on how to avoid this weirdness? I'm assuming it takes a moment for the styles to be applied to the other component, but it's just slow enough that it's very obvious.

The second component is rendered conditionally via:

{#if showSecond}
  <StepTwo />
{/if}

It's happening when the elements are added, by the way. Not removed.

_nothing confirmed that setting a fixed window size didn't improve the situation.

[shirakaba]

It looks like, during the flicker, the button starts huge:

0:02:

0:06:

It's interesting to note that, although it starts huge, it does start consistently the same size both times. Things would be clearer if we reduced the paddings and margins to understand whether it's growing to a certain container size or some other logical size.

@a7ul does this look like familiar behaviour at all? Could it possibly be anything to do with yoga, or is it a known problem with Qt itself?

[a7ul]

Hey this should be fixed in the latest version

there was a pr for bugs with flex layout here: https://github.com/nodegui/nodegui/pull/814

can you bump the nodegui and react nodegui versions underneath?

[shirakaba]

Thanks @a7ul! Sorry for the late reply. This'll be my top priority next time I'm doing some open-source. Have just been taking a break since the initial release!

[shirakaba]

Fixed in v0.0.2-alpha.2!