How do I show an activity indicator every time my flatlist data changes?-CodePudding

I'm setting the data that my flatlist component displays using a state called selectedStream. selectedStream changes every time the user presses a different group option. I've noticed that the flatlist takes 1-3 seconds to refresh all the posts that it's currently displaying already. I want there to be a loading indicator so that by the time the indicator goes away, the list is already properly displayed with the newly updated data.

        <FlatList   
                    maxToRenderPerBatch={5}
                    bounces={false}
                    windowSize={5}
                    ref={feedRef}   
                    data={selectedStream}/>

CodePudding user response：

Whenever we are working with anything related to the UI, sometimes we may face delays in UI re-rendering. However, need to first figure out what is actually causing the delay.

The right question to ask about your code would be:

Is the rendering of items taking longer than expected? Or, is the data being passes with a delay because it is dependant on an API call or any other async task?

Once you answer that question, you may end up with two scenarios:

1. FlatList taking longer to render views

This doesn't usually happen as the RN FlatList will only render views the are visible to the user at any given time and will keep rendering new views as the user scrolls through the list. However, there may be some flickering issues for which you can refer to the below article:

8 Ways to optimise your RN FlatList

2. Passing the data causes the delay

This is the most common scenario, where we may call an API endpoint and get some data and then do setState to update any view/list accordingly. A general approach is to show some sort of a progressbar that would indicate that the application is busy and thus maintaining a proper user-experience. The easier way to do that is by conditional rendering.

A general example would be:

const [myList, setMyList] = useState();

function callAPIforMyList(){
// logic goes here
}

return {
  {myList ? <ActivityIndicator .../> : <Flatlist .... />

}

The above code will check if myList is undefined or has a value. If undefined, it will render the ActivityIndicator or else the FlatList.

Another scenario could be when myList may have existing data but you need to update/replace it with new data. This way the above check may fail, so we can put another check:

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 .../>)

 }

You can add multiple conditions using more turneries such as isAPIBusy ? <View1> : otherBoolean ? <View2> : <Default_View_When_No_Conditions_Match)/>

Hope this helps clarify your needs.

CodePudding user response：

First wrap your flatlist with a view component and place a ActivityIndicator inside the view, and then you need a loader state for every time user change the data, when user changes the group options loader will be true and when selectedStream changed it will be back to false, use loader in ActivityIndicator animating prop.