search

elm / virtual-dom

The foundation of HTML and SVG in Elm.
https://package.elm-lang.org/packages/elm/virtual-dom/latest
BSD 3-Clause "New" or "Revised" License
209 stars 80 forks source link

Minimise white flash between deleting and replacing nodes in DOM #96

Closed mlandauer closed 3 years ago

mlandauer commented 7 years ago

This improves the visual smoothness of hand-over between static rendered HTML and dynamic HTML that is produced by Elm.

Currently, if we have a large amount of statically generated HTML which is replaced by a large amount of HTML rendered by Elm, on running App.Main.embed there will be noticeable period between the old static content getting removed and the new content being added. Depending on the styling this can result in the appearance of a "white flash".

This commit does the absolute minimum to bring the removal and addition closer together so that the white flash is minimised. There are further optimisations that could be done. For instance, we could in the case of a single child use node.replaceChild instead of node.removeChild followed by node.appendChild.

At https://github.com/mlandauer/elm-test-handover there's a very simple elm app which demonstrates the issue. This is what happens now: white-flash-before

The red box is static HTML content which is then replaced by the nearly identical green box rendered by Elm. There is a short period between where there is nothing rendered (the white flash).

Here you can see the effect of this patch. white-flash-after

The white flash between the red and green box has gone.

process-bot commented 7 years ago

Thanks for the pull request! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

Pilatch commented 6 years ago

I wondered if this issue persists in Elm 0.19, so I forked the test handover and upgraded. https://github.com/Pilatch/elm-test-handover/tree/reproduce-issue-in-elm-0.19

On my MacBook Pro, which is probably not a great test bed, I cannot see the white flash in 0.19.

mlandauer commented 3 years ago

Since this has never (as far as I can tell) been looked at by any maintainer

Pilatch commented 3 years ago

@mlandauer They should eventually come around to looking at it in a "batch". I don't think it needs to be closed.