Implement loading spinner, improve UX for slow internet connection

[mkalygin]

Description of changes:

For testing, I've been using Chrome's network throttler. I tested these changes in all modern browsers. Don't forget to add react-spinners to rollup.config.js.

• Implement srcset preloading.
• Don't allow spamming of next/prev when image is not loaded yet.
• Implement loading spinner, use react-spinners BounceLoader by default.
• Implement new properties: spinner, spinnerColor, spinnerSize for spinner customization.
• Improve UX for slow internet connection: show spinner, fade-in animation for loaded image.
• Refactor code of Lightbox by moving rendering code to renderers.
• Update examples with new spinner properties customizations.
• Add documentation about new spinner properties to README.md.

Related issues (if any):

#93

Checks:

• Please confirm npm run lint ran successfully
• Please confirm that only /src and /examples/src are committed
• [if new feature] Please confirm that documentation was added to the README.md

Screenshots:

[mkalygin]

I'm still working on improving UX. Currently there is a blink of spinner when the connection is fast. Very annoying. After fixing it, I think this PR is good to go, unless you find any other issues with it.

[mkalygin]

Now this is a lot better. It's ready for review and QA.

[jossmac]

This is awesome! Thanks @mkalygin 🎉

[igorescobar]

@mkalygin was this released or it is just on master branch yet?

[igorescobar]

Does anyone managed to get this working? I see that this was released already but I really couldn't make it work. No errors, nothing, the loader just doesn't appear. Everything else works fine... except the arrows. It is working kinda of buggy. Seems that if the next image isn't loaded the arrow doesn't work. I have to close the Lightbox and click on the images to be able to see it.

What kind of information do you want me to provide?

[mkalygin]

@igorescobar it seems that @jossmac forgot to update JS build for this and released a new version without these changes. In the meanwhile feel free to use it from my original branch: https://github.com/mkalygin/react-images.

[igorescobar]

cool! thanks @mkalygin!
@jossmac let us know once it's fixed, thanks!

[mkalygin]

@igorescobar to be precise, the ready-to-use version in loading-build branch: https://github.com/mkalygin/react-images/tree/loading-build

[igorescobar]

@mkalygin that explains a lot ^^
Thanks!

[neptunian]

I published the build files for this functionality. It looks great thanks @mkalygin !

[mkalygin]

@neptunian thank you very much, I'm glad to help!

[igorescobar]

@mkalygin @neptunian thank you so much guys!