[Question] How to do Lazy Loading for Item Loading of a collection?

Ask us anything How do I?
1

Hey guys, how are you?

I have a Ranking containing a list of accordion items. Each accordion item when expanded has information to be displayed.

Captura de Tela 2024-04-03 às 08.52.40
Captura de Tela 2024-04-03 às 08.52.402998×1244 216 KB

Clearly in testing, trying to load all these items caused a memory crash in the application. Solution to not break: I used conditional rendering to display some information blocks only when expanding the accordion item. Problem solved, but each click there is a delay (lag).

IDEA FOR A POSSIBLE BETTER SOLUTION: :bulb:

What if Weweb was loading the data in lazy loading, that is, only load the data for the second item in the list only if the first one has been completely loaded? I would really like to test this possibility.

Does anyone know if weweb has this feature available and how to do it?

thanks in advance!!

2

Hi, you can achieve it yourself, use an endpoint to get the list of items, another to get the detail of an item.

  1. Create a global variable of type array that will store the list with details Accordeon List
  2. Then request the endpoint to get the list and put the result inside the variable
  3. Use the variable to display the list
  4. Each time you open an accordeon, make the request to get the detail for this item
  5. With the result, update the variables and merge the item with his details in the list
1 Like