Semantic-ui-react: Loader is not visible in a Modal

[james-ff]

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' />

[james-ff]

Thank you for the workaround! @layershifter

[mac-s-g]

for those using Styled Components:

const Loading = Styled(Loader)`
  &&&& {
    &:after {
      border-color: #767676 #ddd #ddd;
    }
  }
`

looks great in a Modal!

[ireznik]

Do I understand it correctly that all issues concerning this behaviour were resolved or closed but the fix is to be done by hand if I want to display a loader in modals?