Loader is not visible in a Modal

Bug Report

Steps

Place a Loader component in a Modal Content component

Expected Result

Spinning Loading Icon.

Actual Result

Icon not visible

Version

0.82.2

Testcase

Taken from the Modal Example:

import React from 'react'
import { Button, Header, Image, Loader, Modal } from 'semantic-ui-react'

const ModalModalExample = () => (
  <Modal trigger={<Button>Show Modal</Button>}>
    <Modal.Header>Select a Photo</Modal.Header>
    <Modal.Content image>
      <Image wrapped size='medium' src='https://react.semantic-ui.com/images/avatar/large/rachel.png' />
      <Modal.Description>
        <Header>Default Profile Image</Header>
        <p>We've found the following gravatar image associated with your e-mail address.</p>
        <p>Is it okay to use this photo?</p>
        <Loader active inline='centered' />
      </Modal.Description>
    </Modal.Content>
  </Modal>
)

export default ModalModalExample

[layershifter]

It’s a known CSS issue: https://github.com/Semantic-Org/Semantic-UI/issues/4014

There is also a workaround:

.ui.dimmer .ui.workaround.loader:before {
  border-color: rgba(0,0,0,.1);
}
          
.ui.dimmer .ui.workaround.loader:after {
  border-color: #767676 transparent transparent;
}

<Loader active className='workaround' size='large' inline='centered' />

[samuel-knutson]

If you want to apply @layershifter’s workaround to all modals without the extra css class:

.ui.dimmer .ui.modal .ui.loader:before {
  border-color: rgba(0,0,0,.1);
}
          
.ui.dimmer .ui.modal .ui.loader:after {
  border-color: #767676 transparent transparent;
}