Estoy usando un componente llamado <Player/> , que muestra una página con "jugador no encontrado" o carga los datos de un jugador consultado y guardado.
El componente tiene un estado local, que es player y, de forma predeterminada, es nulo. Hay un useEffect que busca en la base de datos con el nombre de usuario como parámetro, y si se encuentra un usuario, el JSON devuelto se guarda y se establece en el estado con setPlayer(res) . Si no se encuentra ningún usuario en la recuperación, el estado permanece en null .
Cuando el estado es null , la página muestra 'usuario no encontrado'. Cuando el estado no es nulo (lo que significa que encontró un jugador), cargo la información.
Esto está funcionando según lo planeado, sin embargo, cuando se va a una ruta como player/existingPlayer , la página se muestra por un segundo rápido como not found antes de actualizar y mostrar los datos de los jugadores correctamente.
¿Es esta la única manera posible de hacer esto? ¿Es esto de esperar? Sé que la obtención de datos lleva inherentemente unos segundos dependiendo de la conexión, pero siento que esta experiencia de usuario es severa.
¿Alguna sugerencia para mejorar esto?
Cuando el reproductor es nulo, muestre la carga, y después de obtener la información del reproductor, si existe, simplemente muestre la información del reproductor si no está vacío "" y si su estado era igual a "" muestre el reproductor no encontrado así
export default function App() { const [player, setPlayer] = useState(null) useEffect(() => { // fetch here and set player to "" if not found }, []) if(player == null) return <div>Loading...</div> if(player == "") return <div>No Player Found.</div> return ( <div className="App"> Player info goes here... </div> ); }