Revisé el caso, comparto mis notas.
Latencia en DOM render con react router Link
El componente Link
cambia la URL
manipulando la HTML5 History API, pero el contenido del componente enrutado en Link
puede parecer no mostrarse (render) en sincronía con el cambio de la URL.
El problema cuando voy de http:.../algo/1 hacia http:.../algo/2 me renderiza por unos milisegundos A y luego pasa a B y asi a la viceversa.
Hay una latencia entre el cambio de rutas con respecto al render para cada componente.
Puede parecer imperceptible a cierto tipo de datos, pero al manipular imagenes y su carga, esta latencia es muy evidente en el explorador, su causa parece ser asincrónica ya que la imagen se carga desde otro servidor.
Es decir, no se sabe cuanto tiempo va a tomar la imagen en cargarse por completo en el componente, pero si se puede saber cuando ya esta cargada.
Cabe mencionar que no logré resolver el problema de la latencia, ni con Suspense/lazy
, ni con banderas tipo isLoading
controladas por estado local.
Propuesta
La siguiente propuesta puede ser útil para cualquier tipo de dato que necesite ser pintado en el DOM, pero se muestra el caso de uso para imagenes.
La única forma de evitar que el usuario viera la misma imagen por unos instantes aunque la ruta ya hubiese cambiado(click en Link/boton etc...), fue accediendo al evento onLoad
propio de elemento img
.
Luego, asignar un valor de estado con este elemento img
para posteriormente, pintarlo en el re-render:
//pseudocodigo Gallery
function Gallery(props){
const [imgCard, setImgCard] = useState(null);
useEffect(() => {
let newListItem = document.createElement('img');
newListItem.src = props.url;
newListItem.onload = function () {
setImgCard(newListItem)
}
},[props.url])
return {imgCard}
);
Entonces, la secuencia del componente Gallery
:
- El usuario entra en una nueva ruta, su componente renderiza
{imgCard}
, su estado inicial es null
, no hay nada.(Aquí se puede implementar una bandera isLoading
o similar). El usuario deja de ver el asset(imagen) que esta en la ruta anterior.
- Se dispara
useEffect
, ahi se crea un elemento img
, se asignan valores a sus propiedades como url
y demás.
- Se invoca al metodo
onload
para disparar un re-render del componente una vez que la imagen ya este cargada en el mismo.
- Se dispara el re-render,
imgCard
ya cambio su valor de estado por un elemento img
con propiedades asignadas, el cual ya ha sido previamente cargado en useEffect
.
Puede que haya una mejor manera de trabajar esta latencia en datos, los cuales necesiten ser pintados en el DOM al cambiar de ruta.
Otras respuestas/comentarios/aportes son bienvenidos.