[openstreetmap/openstreetmap-website] Avoid flickering in export (#2791)

[Andy Allan]

This turns out to be harder than I thought. :smile: 

The jQuery `.toggle` works by applying a `style="display: none"` to the element, but I can't use an inline style to hide it by default (due to CSP) and the bootstrap `d-none` class sets `display: none !important` and that overrides the toggling. This means that we need to change the javascript slightly, to use `.toggleClass` instead of .`toggle`, e.g. `.toggleClass("d-none", getBounds().getSize() < OSM.MAX_REQUEST_AREA);`

The bigger issue is choosing what to show by default, since we need to consider both the message and the button. If I hide the message and show the button by default, that looks fine when the initial state is zoomed in, but flickers when the initial state is zoomed out. If show the message and hide the button, it looks fine when zoomed out but flickers when zoomed in.

I'm not sure what the best approach is. Maybe we need to hide the entire panel by default, let the calculations run once to show either the message or the button, and then show the entire panel after that calculation has run?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/2791#issuecomment-697717659
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20200923/b950a759/attachment.htm>