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 Loaders 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.