Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

LoadingSpinner - add setTimeout of one second before rendering

See original GitHub issue

Issue Description

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

emmenkocommented, Aug 12, 2021

No then it should be fine. Thanks

ByronDWallcommented, Aug 17, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use setTimeout with a Loader - Stack Overflow
You can add useEffect hook to update the DOM. You are only updating the loading flag inside handler. React does not know that...
Read more >
How to Display a Loading Spinner while DOM is rendering in ...
Adding our loading spinner class directly in the index.html means we can ... we have to add an except directly before our render()...
Read more >
How to use spinner (LWC) with setTimeout
I have an LWC component that has a spinner in it as shown below ... it just stays spinning and does not go...
Read more >
Delay the Appearance of a Loading Spinner with CSS in React
Until it does, we can use CSS animations to delay visibility of delay spinners. ... Extract Reusable React Components with an As Prop,...
Read more >
How to add Loading Spinner component in React JS
In the below example, the user list is fetched from an external API on the button click. The Screen remains unchanged for a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found