Loading circle/Spinner customization

[ray-su]

Hello! Thank you for this great package. Is it possible to add Loading circle/Spinner customization to it?

[dmoli]

@ray-su did you can add a custom image?

[ray-su]

@kaizenberg I didn't. If I remember correctly, the loading spinner is not a looping gif. it's made using CSS transform.

[3nvi]

Any progress on that? From my perspective i'd love to be able to provide a react element as a custom loader. Like so:

<Lightbox
  {...otherProps}
  spinner={<MyCustomLoader />}
/>

[fritz-c]

This is a good candidate for a pull request.

[mik639]

Hi guys, I have pr for this :) #125

[borisrorsvort]

@wuweiweiwu @fritz-c Any update on this? Can you tell us what to do/expect?

[SeinopSys]

Seems like this was implemented in #385 but the TypeScript type definitions weren't updated, so attempting to use the loader property results in a type error.

[ghost]

Hello @SeinopSys,

Can you explain a bit more the issue? When I try to implement a custom loader component, by using the loader={<ComponentName/>}, I get no error at all. <Lightbox... loader={<Test/>}/>

With my test component being:

const Test = () => { return ( <div style={{...}}>Loading...</div> ); }

Result I get:

[SeinopSys]

That's not TypeScript though. I created a CodeSandbox link which shows the issue: https://codesandbox.io/s/react-image-lightbox-typescript-error-cn3hw?file=/src/LightboxExample.tsx

The loader prop is not recognized by TypeScript due to that property missing from the interface inside index.d.ts in the root of the project.