search

yaodingyd / react-flickity-component

A React.js component for using @desandro's Flickity
314 stars 51 forks source link

Proper approach for setting a Loading State for flicking slider #108

Open monecchi opened 4 years ago

monecchi commented 4 years ago

I was hoping to create a HOC where I’d hook on Flickity events to set a loading state so that I could display a kind of mock or loading skeleton for the slider while flickity isn’t ready or when images have not loaded yet...

I’ve tried to use the lazyload event in order to check for images and then use useEffect(), useState() to define its loading state, but that seems too late for displaying a loading skeleton...

I also tried to apply a css class to the slides container when images were not yet loaded, but by using lazyload, the images are loaded so fast that the styles which mimic a loading skeleton are quickly removed after lazyload is done...

I’d really appreciate any hints regarding a proper way of achieving that effect...

yaodingyd commented 4 years ago

I'm afraid currently there is no good way to do this. We have this flickityReady internal state to indicate whether it's ready, but it's not exposed.

Maybe we could add a flickityReadyCallBack option