Reinicia los Suspense boundaries al cambiar de rutas con Next.js y App Router en 1 minuto

tenemos un ecommerce con un Buscador de productos pero al Buscar tarda unos cuantos segundos hasta Mostrar los resultados vamos a envolver el componente products encargado de obtener los productos en un componente suspense de react pasándole como fallback una ui de carga que querramos Mostrar al usuario mientras Espera los resultados si recargamos la página vamos a ver que nuestra ui de carga se muestra correctamente pero si intentamos hacer una búsqueda una vez que la página ya

cargó vemos que sigue tardando varios segundos antes de mostrar los resultados y no muestra nuestra ui de carga vamos a pasar una prop key al componente suspense con el texto de nuestra búsqueda de esta manera react sabe que debe volver a montar el componente suspense cuando cambie nuestra búsqueda mostrando así nuestra ui de carga