I am currently building a calendar schedule view feature, where I have Month title as Header and the days as the items. I am currently fetching calendar event of about 6 weeks. which if the data is not present or so, it would still cover up the page and I can use onScrollEnd to query more data via useQuery.
But, I am trying to optimize my calendar feature and querying 6 weeks worth of events would not be ideal and would take time to load. thus, I was trying to find a way, where, if I can query let's say 1 week worth of data, if that does not have enough data (like 1-2 events) to cover the screen (for user to invoke onScrollEnd), then query next batch and so on and at the end wrapping the container with memo in order to help boost the load speed and lazy load data as required. Any idea how would this be possible?
I have looked at various examples of lazy loading such as:
etc, but my problem is that in these code examples, they do not cover the possibility of first or second batch/ page to have less data and querying for next page automatically.
I also thought of using FlatList nested with SectionList, but ended with conclusion that it would not be possible and data would be rendered twice.
What I want to happen:
<Schedule> --> component
render → Coordinate which Month in the SectionList should paginate through the events
<SectionList>
onEndReached → create more months
<Month>
<FlatList>
render → <Event />
onEndReached → fetch more events
<FlatList>
</Month>
</SectionList>
<Schedule>
So there are two "onEndReached" triggers, one to create more months when the user scrolls down the entire page and a second to get more events, when the user scrolls down the current month.
The Month component should just load 1 weeks worth of events at a time and paginate as the user is scrolling.. I somehow need some way to figure out that if the current week does not have enough data to cover the screen then query more data, and so one as always show the full page... Any help/ ideas would be appreciated. Thanks :).