daattali / shinycssloaders

⌛ Add loading animations to a Shiny output while it's recalculating
https://daattali.com/shiny/shinycssloaders-demo/
Other
395 stars 45 forks source link

Using visibility hidden adds occasional "wobbling" to the viewport height if the spinner changes height #67

Closed stefanoborini closed 2 years ago

stefanoborini commented 2 years ago

The shiny-spinner-hidden css class uses visibility hidden to hide the spinner when the content is loaded. visibility hidden entries still occupy the same space, they are just invisible. However, some spinners pulsate in a way that their vertical size changes slightly, and the browser accommodates that by slightly wobbling up and down. I've experienced this in some circumstances when the page is scrolled to the very bottom.

I suggest replacing visibility: hidden with display:none instead, so that the entity is not only invisible, but also removed from the visual rendering tree completely, thus removing the issue.

daattali commented 2 years ago

This issue is related to https://github.com/daattali/shinycssloaders/issues/54 (and the idea of using display instead of visibility was suggestd there too). As mentioned in the other thread, I'm trying to be very conservative in changing such core code in fear of breaking existing applications, but perhaps it's time to at least test this out.

Feel free to submit a PR that changes from using visibility to display

daattali commented 2 years ago

Tracking this in #54 . You can see my latest comment there about trying out display:none

daattali commented 2 years ago

@stefanoborini I submitted a fix that I hope won't break anything. Please verify the new code works for you and if you can please also test any other existing apps you have

stefanoborini commented 2 years ago

@daattali thanks! i'll check.