Currently, I am utilizing the react-spring library along with the render-props API to adjust the background-size CSS property based on changes in the background image. However, I have noticed that there are instances where the background image fails to load quickly enough, resulting in a less than flawless transition in the background size.
Is there a method available to delay the Spring effect until after the background image has been fully loaded? Or would my only option be to preload all of the background images in advance?
The object I am working with has an extensive array of background images, many of which are large in size. Preloading all of these images may consume a significant amount of memory and is not ideal for my particular situation.
Below is a snippet of the code I am currently using:
<Spring native
from={{backgroundSize: "105%", backgroundImage: streamRectangleBackground}}
to={{backgroundSize: "101%", backgroundImage: streamRectangleBackground}}
reset={this.shouldResetAnimation(streamRectangleBackground)}>
{props =>
<animated.div className={"streamRectangle"} style={props}>
<Timer timerSetup={this.state.timerSetup}/>
</animated.div>
}
</Spring>
Thank you for any insights or suggestions provided.