Delay loading animations for smoother UX

[fergie-nz]

Loading components render by default, then turn off when loading is complete.

This causes the components to snap on and off when the system is running quickly (ie queries return empty) which makes for a clunky UX.

Suggest delaying rendering of loading components so it isn't so snappy.

This is probably low priority, but also easy to implement.

[CarlosNZ]

You might want to look at Semantic-UI transitions: https://react.semantic-ui.com/modules/transition/

If the loading spinners slid away softly that might help.

If you're thinking of the Dashboard page, another option is, if there are no Filters to render (i.e. all queries empty) in a block, then we don't remove the spinner, we just set visibility: hidden so the block doesn't collapse and just stays there with a bit more whitespace in it.

[fergie-nz]

Here in the list builder is what I'm thinking of with snapping to and from the loading display

I wondered if it would be a better UX to delay the loading display for a set period - maybe 200ms - so that it doesn't snap back and forth when there is no data to display (and is loading very fast)