Semantic UI React: Loader won't show up
Date: 2019-06-10 | semantic-ui | react | loader | troubleshoot | javascript | jsx |
problem
I'm trying to use Semantic UI React components to build out my app but the Loader
component won't show up. I've tried giving it the inverted
class name which typically flips the element's content color to see if maybe it was just blending into the background, but that didn't help. How do I use the Loader
?
solution
The Semantic UI React Loader
component is kind of confusing it's typical to have some issues when first using it. Note from the official docs that Loader
s are "hidden unless active or inside an active dimmer".
So this just means that you've got to either set your Loader
to active
(via component prop) or wrap it in a Dimmer
that is set to active
.
This'll look something like the following jsx
:
<Dimmer active inverted>
<Loader>Loading</Loader>
</Dimmer>
did this help?
I regularly post about tech topics I run into. You can get a periodic email containing updates on things I've built by subscribing here
Want more like this?
The best / easiest way to support my work is by subscribing for future updates and sharing with your network.