How to use clock to load items in a listview/custom listview?

From last 2 months, I have been trying to achieve it and finally I got it right.
It is very useful if you have huge data in your list.

Well, I am making this guide because I feel many Koders are still stuck in between the process of achieving it. :slight_smile:

Extensions and components I used:

i) Dynamic Components by @yusufcihan
ii) Vertical Scroll Handler by ColinTree
iii) Clock component(built in)

How to do it:

i) Initialize the blocks:

You have to initialize five variables, i.e. first_load (it will be the number of items you want to load when the screen will initialize for the first time), next_load(it will be the number of items you want to load after the clock triggers), maximum_load(it will be the total number of items available in the list), new_list(we will put all the items which will load after clock triggers), main_list(it will contain all the items which we want to load).

Annotation 2020-06-05 121733

ii) After the airtable spreadsheet will get all items in the column, we will set global maximum to length of main list and then we will index all the items in the list. You will understand it with the help of blocks below.

iii) As we are using Vertical Scroll Handler, we will use “When VerticalScrollHandler1.ReachBottom” block to inform the app that we have reached the bottom of the layout so that app will trigger the clock component.

Annotation 2020-06-05 122750

iv) After the clock triggers, we will add the logic which will check if the list has come to an end or not. If the list did not come to and end yet, we will add items to the list else we will stop it.

I am attaching an AIA file so that you can understand and play with blocks. :wink:

test (2).aia (88.9 KB)

Hope you understood it.

Thank you.

11 Likes

It should not be list but dynamic components instead.

Can you screenshot the end result?

And is it an extension (VerticalScrollHandler)?
Edit:
Oops…

Yes, it is… :arrow_double_down:

End result is all the items in the list is loaded. :sweat_smile:

1 Like

My mistake. But it will be listview not dynamic components because we can use this procedure in other list view components also. :wink:

What is the benefit of using it, because, we are loading whole data at same time from airtable and showing it in splits.

We are getting data(image url) in the form of string but when the image component tries to load those image from the web, it takes time and the app starts to lag. That’s why we are showing it in splits. :slight_smile:

2 Likes

@developerpritam if u want to load customized data from database then u can check here
Custom data

3 Likes

Can we do with google spreadsheet plz gelp me?

Yeah. Of course. You can do that with every database.

Thy is my Google spreadsheet blocks.

1 Like

This is my google spreadsheet block

You will have to make two lists for every data you want to show. One list will be the main list and other will be the filtered list which you will show in your list show.

I cant understand Can u make it i will send u aia file

I have attached my aia file above. Have you checked it?

can u send screenshot of airtable spreadsheet which u have used plz?

Custom_Design_ListView_Load_More.aia (292.7 KB)

This is the AIA file with Spreadsheet block. I found it on the community. I deleted my aia file but the blocks used in this file is same as mine. It will help you for sure. :slight_smile:

I will try this method though I am using firebase to create a group chatting app