igordanchenko/yet-another-react-lightbox

Allow for customizing the placeholder

krokosik opened this issue · 1 comments

krokosik commented

Is your feature request related to a problem? Please describe.

Currently it is not documented how the placeholder for a loading image can be styled. I wanted to replace your svg loader with my css one and tried to style the yarl__placeholder class. I managed to hide the svg and display my loader but for some reason it's doing some weird diagonal translations on my screen. Would it be possible to provide an official way to style the placeholder? I'd be happy to help if you let me know how would you implement that in your code.

Describe the solution you'd like

Being able to apply styles to yarl__placeholder in a clean and predictable way or to provide a React placeholder conponent as prop.

Describe alternatives you've considered

No response

Additional context

No response

igordanchenko commented

You can customize the loading indicator via render.iconLoading prop:

<Lightbox
  // ...
  render={{
    iconLoading: () => ...
  }}
/>

This prop is described in the documentation - https://yet-another-react-lightbox.com/documentation#Render