Semantic-ui-react: No loader inside a modal?

[AlvMF1]

Not sure if it's a SUI core or SUI react issue...

Testcase

codepen.io

[levithomason]

Ah, appears to be a CSS issue. I would open an issue on SUI core, linking to here.

A Loader in a Modal is a child of a Dimmer (since the Modal has a Dimmer). So, the Loader is white as the CSS expects it to be displayed directly on the Dimmer (black), not on something white (Modal) inside of the Dimmer.

If you wrap the Loader in an inverted Segment, this is clear:

// ...in a Modal
<Segment basic inverted>
  <Loader active inline='centered' />
</Segment>

Workarounds

Either removing the Dimmer, or using an inverted (white) Dimmer will allow the Loader to be visible.

No Dimmer

<Modal dimmer={false} />

Inverted Dimmer (white)

<Modal dimmer='inverted' />

[levithomason]

Basic Modal

You could also use a <Modal basic /> which has no background:

[scherroman]

Another workaround is to surround your loader with an extra inverted dimmer

<Dimmer active inverted>
    <Loader active inline='centered'/>
</Dimmer>

This will actually dim the entire content of the modal, but it gets the job done