LoadingSpinner - add setTimeout of one second before rendering

Is your feature request related to a problem? Please describe. DCY-121 and PAN-1029 suggest implementing a setTimeout interval of 1 second to loading indicators so that loading indicators do not flicker for a few milliseconds

Describe the solution you’d like The solution I am considering is to implement a setTimeout that is called on mount of the LoadingSpinner component, which would set a local state value (e.g. isActive) that controls whether or not the LoadingSpinner renders. If the LoadingSpinner dismounts before the 1 second interval is over, the timeout will be cleared with the clearTimeout method.

Currently, the LoadingSpinner has no isActive (or similar) prop/state value that controls whether the component renders. I propose that the isActive value should be controlled by the component internally, and set exclusively by the setTimeout method that would run on mount.

Additionally, I propose exposing a prop named noDelay (or similar) that would allow for the LoadingSpinner to mount without the 1 second delay if there are usecases where a one second rendering delay would not be optimal.

Additional context The rationale for this change is described in further detail here

Additionally, in investigating implementing this change, I ran into an issue in jest version 27+ that complicates testing timers such as setTimeout effectively. Any guidance on best practices for testing timers in the UI-Kit test suite would be appreciated.

[emmenko]

No then it should be fine. Thanks

[ByronDWall]

Just to chime in briefly. The idea is nice and we use it internally already with an internal component. Just to share in case it went under the radar. It’s called delayed-spinner.

Thanks for mentioning this! I will take a look at the internal component to see how it was implemented, and will be adding the timeout functionality to ui-kit LoadingSpinner in the near future.