Tengo una presentación de diapositivas de imágenes (que cambia cuando hago clic en diferentes opciones. Por lo tanto, las imágenes no cambian automáticamente) y aunque primero precargo todas las imágenes cuando se carga la aplicación (tengo todo esto en reaccionar) todavía "parpadea en blanco" entre ellos. El código de precarga:

 useEffect(() => { setPreloaded(false) const preLoadImages = function preLoadImages(imageUrl, numberOfImagesPerColumn) { const promises = []; for (let index = 0; index < numberOfImagesPerColumn; index++) { const fImgUrl = `${imageUrl}${index + 1}.${t}`; promises.push(loadImage(fImgUrl).catch((err) => { // TODO: Handle 404 Error })); } return Promise.all(promises); }; function loadImage(src) { return new Promise(((resolve, reject) => { const img = new Image(); img.onload = function () { resolve(img); }; img.onerror = function () { reject(src); }; img.src = src; })); } preLoadImages(p, n).then(() => { setPreloaded(true); }); }, [p]);

¿Cómo puedo hacer una transición suave entre ellos o como si la imagen anterior permaneciera hasta que la nueva se cargue por completo y haga la transición sin un "destello blanco" entre ellos?