question-mark
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.

fix[Loading Component]: both loading and inline loading component tweaks

See original GitHub issue

fix[Loading Component]: small loading and inline loading

  • Get rid of clunky toggle state button and try a timer Loading…loading… success

  • Convert button to sm variant

  • Check small loader (both loading and inline loading) stoke weight looks narrower than spec (it should be 3px wide in spec and 16px square in total) image

  • Small loader is missing the gray section at the start, then gray section suddenly appears. gif

  • Don’t we need a failure state beside success state? See failure state design below: image

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
shixiedesigncommented, Mar 7, 2019

Looks like @jeanservaas had a question about adding a new error state to the loader?

I realize adding an error state would be an added feature. @dakahn Let’s not worry about for v10!

1reaction
alisonjosephcommented, Mar 5, 2019

This is a weird one, I believe this is an issue with the css animation. I made the .bx--loading__stroke transparent and the bx--loading__background red so I could see what was going on with the background, and the background is animating at the beginning at the same speed as the stroke, so it looks like it isn’t there. loading

Read more comments on GitHub >

github_iconTop Results From Across the Web

Inline loading - Carbon Design System
The inline loading component provides visual feedback that a user's action is being processed.
Read more >
Show loading screen when navigating between routes in ...
I found this to make the animation smoother compared to using *ngIf or an async pipe. This is similar to my previous answer...
Read more >
Declaratively loading JavaScript - Fullstack React
If two components require the same js source, the ScriptCache won't load another instance on the page, it will just keep working. Let's...
Read more >
A Bare-Bones Approach to Versatile and Reusable Skeleton ...
UI components like spinners and skeleton loaders make waiting for a page load less frustrating and might even affect how loading times are ......
Read more >
how to add loading animation to website react
Create React component to display in loading spinner. ... svg-react-loader - "A webpack loader allowing for inline usage of a SVG as 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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found