Estoy configurando los datos que mi componente de lista plana muestra usando un estado llamado selectedStream. selectedStream cambia cada vez que el usuario presiona una opción de grupo diferente. Me di cuenta de que la lista plana tarda de 1 a 3 segundos en actualizar todas las publicaciones que ya se muestran actualmente. Quiero que haya un indicador de carga para que, cuando el indicador desaparezca, la lista ya se muestre correctamente con los datos recién actualizados.
<FlatList maxToRenderPerBatch={5} bounces={false} windowSize={5} ref={feedRef} data={selectedStream}/>Cada vez que trabajamos con algo relacionado con la interfaz de usuario, a veces podemos enfrentar retrasos en la nueva representación de la interfaz de usuario. Sin embargo, primero debemos averiguar qué está causando realmente el retraso.
La pregunta correcta para hacer sobre su código sería:
¿La representación de los elementos está tardando más de lo esperado? ¿O los datos se transmiten con retraso porque dependen de una llamada a la API o de cualquier otra tarea asíncrona?
Una vez que responda esa pregunta, puede terminar con dos escenarios:
1. FlatList tarda más en renderizar vistas
Esto no suele suceder, ya que RN FlatList solo representará vistas que son visibles para el usuario en un momento dado y seguirá representando nuevas vistas a medida que el usuario se desplaza por la lista. Sin embargo, puede haber algunos problemas de parpadeo para los que puede consultar el siguiente artículo:
8 formas de optimizar su RN FlatList
2. Pasar los datos provoca el retraso
Este es el escenario más común, donde podemos llamar a un punto final de API y obtener algunos datos y luego hacer setState para actualizar cualquier vista/lista en consecuencia. Un enfoque general es mostrar algún tipo de barra de progreso que indique que la aplicación está ocupada y, por lo tanto, mantiene una experiencia de usuario adecuada. La forma más sencilla de hacerlo es mediante la representación condicional .
Un ejemplo general sería:
const [myList, setMyList] = useState(); function callAPIforMyList(){ // logic goes here } return { {myList ? <ActivityIndicator .../> : <Flatlist .... /> } El código anterior verificará si myList no está undefined o tiene un valor. Si no está undefined , mostrará ActivityIndicator o FlatList .
Otro escenario podría ser cuando myList puede tener datos existentes pero necesita actualizarlos/reemplazarlos con datos nuevos. De esta manera, la verificación anterior puede fallar, por lo que podemos realizar otra verificación:
const [myList, setMyList] = useState(); const [isAPIbusy, setAPIBusy] = useState(false) function callAPIformyList() { setAPIBusy(true) /// other logics or async calls or redux-dispatch setAPIBusy(false) } return { {!isAPIBusy && myList ? (<Flatlist .... />) : (<ActivityIndicator .../>) } Puede agregar múltiples condiciones usando más tornerías como isAPIBusy ? <View1> : otherBoolean ? <View2> : <Default_View_When_No_Conditions_Match)/>
Espero que esto ayude a aclarar sus necesidades.