How to call an image fetching function on next/previous slide click and await the response

[JPVRS]

I'm dealing with sets of images returned from an API. Due to API limits imposed by the vendor, it's not practical to request all of the images at the same time, every time a user opens the lightbox.

I need to request only the image selected by the user (the user clicks on a link with anchor text like "Figure 1", "FIgure 2", etc. to initially select an image) and display the selected image in the lightbox. I should note that the initial image that the user selects will not always be the 1st image in the set. They can click to view any image in the set when initially opening the lightbox.

After the lightbox is open, when the user clicks to the next/previous slide, I need to invoke a function that fetches the next/previous image from the vendor's API into an image blob URL, and ideally display a loading state while the image is being fetched. I'm lost on how to pass the information needed for these API calls "through" the lightbox and trigger the API calls/loading state when the user clicks to the next/previous slide.

The initial image could be fetched ahead of time, or it could be called when the lightbox opens using the fetching function (so that all slides including the initial slide use the fetching function). Whatever approach is easier.

Any guidance would be appreciated. TIA.

[igordanchenko]

Hi there!

Here is how you can approach this problem:

1. Fill the initial slides array with placeholder slides { src: "" } (empty src string being a placeholder marker)
2. Define a custom render function and render placeholder image / loading indicator
3. Subscribe to the view event and implement your image fetching logic here; update slides array with the loaded image

Here is a proof-of-concept implementation - https://codesandbox.io/p/devbox/yet-another-react-lightbox-228-cyyv8r?file=%2Fsrc%2FApp.tsx

[igordanchenko]

@JPVRS does the above approach address your use case?

[JPVRS]

This is awesome, thank you! I'll play around with it and see what I can do.