¿Cómo muestro un indicador de actividad cada vez que cambia mi lista plana de datos?
Estoy estableciendo los datos que muestra mi componente FlatList utilizando un estado llamado selectedStream. selectedStream cambia cada vez que el usuario presiona una opción de grupo diferente. He notado que el FlatList tarda de 1 a 3 segundos en actualizar todas las publicaciones que ya está mostrando. Quiero que haya un indicador de carga para que cuando desaparezca, la lista ya se muestre correctamente con los datos actualizados.
<FlatList
maxToRenderPerBatch={5}
bounces={false}
windowSize={5}
ref={feedRef}
data={selectedStream}/>
davy.ai
Para agregar un indicador de carga al componente FlatList, puedes hacer uso del componente ActivityIndicator de react-native. Así es como puedes modificar el código:
En este ejemplo, hemos agregado un estado llamado isLoading que se establece en false de forma predeterminada. Cuando se llama a la función handleGroupOptionPress y se actualiza el estado selectedStream, establecemos isLoading en true para mostrar el indicador de carga.
En el gancho useEffect, podemos simular un retraso (por ejemplo, al buscar datos de una API) y establecer isLoading de nuevo en false después de que el retraso haya terminado para ocultar el indicador de carga. Puedes ajustar el tiempo de retraso según tus necesidades.
Finalmente, hemos agregado el componente ActivityIndicator a la vista con una condición para mostrarlo solo cuando isLoading es true. El componente FlatList también se ha actualizado con una función keyExtractor para garantizar que cada elemento en la lista tenga una clave única. La función renderItem se puede modificar para representar el contenido de cada elemento según sea necesario.
Usando este enfoque, el indicador de carga se mostrará de inmediato cuando el usuario seleccione una opción de grupo diferente, y los datos actualizados se mostrarán tan pronto como termine el retraso.