Bienvenido de nuevo a StackOverflow en español, espero poder ayudarte, y te agradezco me permitas compartir que existe más de una solución al mismo requerimiento.
Para empezar, voy a simplificar un poco tu componente que está en una clase, para plantearlo como un componente funcional con hooks, ya que precisamente, disminuyen el boilerplate y abren muchas nuevas posibilidades.
import React, { useState, useEffect } from 'react'
function TicketsContainer ({ apiUrl, handleRowClick }) {
const [ tickets, setTickets ] = useState([])
/** con useEffect llamamos a la API, "efectuamos una acción" */
useEffect(() => {
Axios.get(`${apiUrl}/agents`)
.then(result => setTickets( result.data ))
.catch(error => alert(error.message))
}, []) /* dependencias === [], invoca efecto solo al montar el componente */
return {tickets.length && (
<tbody className="list table-hover">
{tickets.map((agent) => {
return (
<tr id={agent._id} onClick={() => handleRowClick(agent)}>
<td className="">
<div className="row">
<div className="col-1 mr-3 xs">
<div class="avatar-table">
<img
src={avatar}
alt="..."
class="avatar-img rounded avatar-xs"
/>
</div>
</div>
<div className="col-auto mt-1">
{agent.firstName} {agent.lastName}
</div>
</div>
</td>
<td className="">{agent.phone}</td>
<td className="">{agent.email}</td>
<td className="">{agent.agentType}</td>
</tr>
)
})}
</tbody>
)}
}
Como puedes ver, estoy pasando la apiUrl y la función para manejar el click del agente, en los props del componente, la función de handleClick
la puedes declarar en el mismo módulo, o dentro de la misma función. Por lo demás la lógica es idéntica. Los hooks que utilizamos son useEffect y useState
¿Ahora, qué opciones tenemos para mostrar un mensaje de espera?
La primera y más sencilla es cambiar la expresión de tickets.length && ${jsx}
a un operador ternario, comparando contra el tamaño del array de tickets, quedaría algo así:
return tickets.length === 0
? 'Por favor espere, cargando la lista de tickets'
: {<tbody>...}
Había prometido en los comentarios, usar Suspense
, pero por el momento, solo está en producción para componentes que se cargan en demanda con React.lazy
. No obstante en un futuro próximo puede ser una solución aún más simple que manualmente verificar los datos que tenemos en el state
de nuestro componente: https://reactjs.org/docs/concurrent-mode-suspense.html
No obstante veamos otra opción, manejar la carga de datos externos, y el manejo de error, con un patrón muy interesante y básico y que te permitirá hacer más testeable tus componentes. Es el simple patrón Contenedor - Presentación (o smart vs dumb).
En este separamos la lógica de recuperar datos, de la presentación, básicamente tu componente de presentación no sabe de donde le llegan los datos, o el mensaje de error, o la función que maneja el click a una fila, nada, solo recibe y presenta los datos y pasa los eventos a la función que maneja el dato, es pura vista.
Y por otra parte, tienes el contenedor, que maneja la lógica y las pasa a la presentación.
function TicketsContainerHandleError ({ apiUrl }) {
function handleRowClick (agent) {
// useModal u otra mecanismo para manejar el detalle de un elemento
}
const [ tickets, setTickets ] = useState([])
const [ error, setError ] = useState('')
const [ loading, setLoading ] = useState('Por favor espere, cargando tickets')
const retryFn = () => {
setLoading(true)
setError('')
}
useEffect(() => {
Axios.get(`${apiUrl}/agents`)
.then(result => {
setTickets( result.data )
setLoading(false)
})
.catch(error => setError(error.message))
}, [error])
return (
<TicketsView
loading={loading}
tickets={tickets}
error={error}
handleRowClick={handleRowClick}
retryFn={retryFn}
/>
)
}
function TicketsView ({ loading, tickets, error, handleRowClick, retryFn }) {
if (loading) {
return <div>{loading}</div>
}
if (error !== '') {
return (
<div className="errorRecover">
<div className="errorMessage">{error}</div>
<button onClick={() => retryFn()}>Puede intentar nuevamente</button>
</div>
)
}
return (<tbody className="list table-hover">
{tickets.map((agent) => {
return (
<tr id={agent._id} onClick={() => handleRowClick(agent)}>
<td className="">
<div className="row">
<div className="col-1 mr-3 xs">
<div class="avatar-table">
<img
src={avatar}
alt="..."
class="avatar-img rounded avatar-xs"
/>
</div>
</div>
<div className="col-auto mt-1">
{agent.firstName} {agent.lastName}
</div>
</div>
</td>
<td className="">{agent.phone}</td>
<td className="">{agent.email}</td>
<td className="">{agent.agentType}</td>
</tr>
)
})}
</tbody>)
}
El patrón presentación - contenedor, te permite sacar de la lógica de la vista, incluso mayor complejidad y manejar otros casos de la lógica de estado, por ejemplo hacer cancelable la promesa del fetch de Axios, u otras librerías, evitando así errores por pasar datos (se da el caso con setState
en componentes de clase también) a componentes que ya fueron desmontados.
{this.state.data.length === 0 ? 'Tu mensaje de fallback' : (el JSX de tu tabla)
. Pero aunque ésta es la solución inmediata, me encantaría tomar tu código (por su sencillez) como ejemplo de como se haría con hooks y con Suspense, me permitirías hacer la edición y poner entonces una respuesta más completa? Pido permiso porque aquí en el comentario ya te di la solución y tú podrías compartir por ti mismo la solución real y ganarte más puntos, pero además va un poco más allá de tu pregunta concr