0

Quiero mostrar una modal mientras se carga toda la información. Estoy utilizando sweetalert2

const submitBuscarFecha = async () => {
    // setRecord([]);
    let timerInterval
    Swal.fire({
        title: 'Cargando!',
        html: 'Espere mientras se cargan los datos... <b></b>',
        timer: 2000,
        timerProgressBar: true,
        didOpen: () => {
            Swal.showLoading()
            const b = Swal.getHtmlContainer().querySelector('b')
            timerInterval = setInterval(() => {
                b.textContent = Swal.getTimerLeft()
            }, 100)
        },
        willClose: () => {
            clearInterval(timerInterval)
        }
    }).then((result) => {
        /* Read more about handling dismissals below */
        if (result.dismiss === Swal.DismissReason.timer) {
            console.log('I was closed by the timer')
        }
    })
    await axios.get(`http://localhost:5000/data/searchByDate/${fechaIni}/${fechaFin}`)
        .then(response => {
            setRecord(response.data);
        });
}

Actualmente me cierra con 1 segundo. Pero si se demora menos, o se demora más dependiendo del internet del usuario final... Gracias de antemano...

1 respuesta 1

1

No utilices un timer, aprovecha el async/await de tu código para que el modal se cierre cuando los datos se reciban, para forzar a que se cierre el modal que está activo puedes usar Swal.close().

Por cierto no utilices async/await en combinación con then(), la idea de usar async/await es dejar de usar los callbacks y tener un código más fácil de leer.

const submitBuscarFecha = async() => {
  // setRecord([]);
  Swal.fire({
    title: 'Cargando!',
    html: 'Espere mientras se cargan los datos... <b></b>',
  }).then((result) => {

    if (result.isDismissed) {
      console.log('I was closed by close()')
    }
  })
  const response = await axios.get(`http://localhost:5000/data/searchByDate/${fechaIni}/${fechaFin}`);

  setRecord(response.data);

  //Esto cerrará tu modal, debido al await del axios se ejecutará hasta que los datos hayan sido 
  //cargados o se haya producido un error tratando de obtenerlos
  Swal.close();
}

Entiendo que esto eliminará la barra de progreso, pero no tiene sentido usarla ya que no se puede estimar cuánto durará el proceso para cada cliente, por lo tanto no puedes estimar qué tan rápido se puede llenar...

Una solución para seguirla usando sería asumir el peor de los casos y obtener el tiemout configurado en tu axios request y hacer que la barra se llene con respecto a este tiempo máximo que significaría que la obtención de datos fracasó. Para está ultima solución la barra empezará a llenarse y si los datos se logran conseguir antes de que el request sea considerado invalido ( se sobrepase el tiempo de timeout) el popup desaparecerá; sin embargo, si se carece de una conexión a internet (el peor de los casos) la barra al llenarse representará que se acabo el tiempo máximo para poder hacer el pedido de los datos, aquí la barra si tendría sentido y sería indicar al usuario que todavía se están intentando obtener lo datos y cuánto tiempo hace falta para que falle el request.

1
  • Gracias,me sivio bastante...
    – Weizman
    el 22 sep. 2021 a las 13:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.