Repeated container shows results after 10-20 seconds

Hi there

On one page I have a container which I repeat with a user log. The log is fairly long, has sometimes about 100 or so entries.

When opening the page with this container, nothing happens for 10-20 seconds and sometimes even longer until the repeated data is finally displayed.

Two questions:

  • Any way to speed up that process?
  • Any way to show that the app is not blocked with a spinning wheel? If so, how would I integrate the spinning wheel? There is no process in the logic canvas so I wouldn’t know how to approach it

Thanks for the help
Andreas

Place the repeated container into a “Recycler view (beta)” that you can find on the component marketplace. This already should do a bit of a speed up.
For the spinner there is the “show spinner” and “hide spinner” logic flow functions. I would use the “show spinner” after your flow that navigates to the big data page and have that spinner hidden on the next page’s logic canvas on “data.dataForRepeat” has changed. Replace this name with your data resource or page variable name.

Hi… I wanted to know if in Recycler View (beta) or With repeated container… it is possible to show only about 10 repetitions instead of for example about 100, what would be your formula in case you can help me. Thank you very much.

Hey @Mihaly_Toth thanks a lot, I will try it out in a couple of days!

1 Like

You could do that with both. It depends on your use case.
If You want to show about 10 items only and not any more on the page then maybe a container with repeat would do it.

Just set the repeat to a formula:

SLICE(SELECT(data.yourDataAsList, YOURCONDITIONOFSELECTION()), 0, 11)

This would show only the first 10 items of the selected list of objects, or records, or texts or whatever you need. Instead of the SELECT(list, formulaOfSelection) maybe you could use the SELECT_BY_KEY(list, key, whatToLookFor), this could be an “id” field or anything. It shows only the first 10 as the index starts at 0 and the ending index is not included in the SLICE() formula.

In case you want to show the first 10 in the beginning and allow the user to see the rest if they scroll down, you should use the Recycler view. Now in this case you just place your repeated container inside the recycler view. And it automatically will load the next items as the user scrolls. This recycler component is an advanced one and can be fine tuned with the properties. I suggest testing it a little bit to get the best results.

1 Like

Hello, thank you very much. Excellent explanation. Blessings, it helped me a lot.

1 Like

Hey @Mihaly_Toth

I have tried out yet the recycler view and it is much faster, thanks very much.

But I have tried to set up the spinner as you suggested and failed.

Data in repeat is stored in appVars.UserLogs, so I set the spinner variable to false in the logic canvas like this:

Receive Event → App Variable UserLogs has changed

That’s not doing the deal. The spinning wheel keeps on turning. Infact I am not surprised since the UserLog in repeat is not changed at all. It’s stored already but it just takes many seconds until the result is displayed.

Maybe I misunderstood you?

Thanks for the help
Andreas

I suggest doing the recycler view first. That should solve the issue. If you already have the app variable fully loaded up with data.

If the app still needs time to load data into app variable then: I guess you should do the show spinner on the event where you set it. Then wait until it is completed, then navigate away and then hide the spinner on the next page. However it would still feel weird a little bit from user perspective to watch a spinner for so long.

Maybe you could add a lottie animation to make the experience more pleasant. Something like this:
https://assets6.lottiefiles.com/packages/lf20_8Yqtmd.json
Or this:
https://assets1.lottiefiles.com/private_files/lf30_fup2uejx.json

Thanks a lot Mihaly, the recycler view solved the issue completely. No need for a spinner anymore.

That was indeed the problem I had. The UserLog is on page 3. On page 1 everything is loaded into the variables and thus I was surprised to see that, even the data is already there, the display needs so much time.

1 Like

Glad it worked. Good luck with you project. :smiley: :koala:

1 Like

Hi @Mihaly_Toth sadly the suggested solution works as hoped but has a bug when sorting and filtering.

Do you have any other idea to speed up the process in the normal scroll view?

What is the bug and how do You set the data of the repeated container?

If You could provide some more infomration about the filtering needs as well, I might try to figure out something.

1 Like

haven’t touched it for a while now. I am using sorting and filtering for the recycler view and when used, the filters did not work. While doing it within the scroll view, it wasn’t a problem.

Now, as I said I haven’t had a look at it for a while since the bugtracker did not advance. I realize now, that meanwhile the recycler view won’t show repeated data at all while scroll view shows the data normally

1 Like

(Greetings, sorry for my English, I had some experience similar to yours.)

And your repeated data handles images? If you handle images in repeated lists, it is good to replace the image component with a container component and put the image to be repeated in the background; it will give you more speed almost instantaneously and faster than a repeated text.

Keep in mind that if the database reuses it on another canvas (Api Rest), it is good to clone that database, since for mobiles with less RAM and Processor, it will generate a lag user experience, as you move down.

You must also play with the recycler component “Force non-deterministic rendering” in TRUE, to experiment and rehearse.

In case it carries image and you put it in the container component as a background, you must lower it to 150 in the recycler component where it says “Render in front offset”, since having the container component and putting an image in the background, it is not necessary to render the images with the recycler, because the recycler also loads the images and spends more RAM in the background.

IMPORTANT:

If your containers were from the “COMPONENTS MARKET”, I advise much that you better design it with containers, but WARNING, DO NOT USE THE ROW COMPONENT, because that is the main problem of the “COMPONENTS MARKET”, which designs it with ROW.

By changing all the components of mine that were designed with ROW, I redesigned them with CONTAINERS only, and I can assure you that your App will fly like a rocket, either with API or without it.

2 Likes

I am a little bit confused why do You have issues with filtering the data. I have done a little bit of testing with this issue and managed to get a list of 495 items to be filtered with button taps.

For sure You do have to note that if You bind the container to a variable or data variable in the repeat binding screen You most probably won’t be able to filter. The cause for this might be that the variable is initialized on the “component mounted” event which happens when the page is mounted as well. So Instead what You would want to do is to bind Your repeat to a formula.

Something like this (or even with nested IFs):

IS_EMPTY(pageVars.numberType) ? 
MAP(GENERATE_RANGE(0,495), {title: item+" element", content: IF(IS_EVEN(item), "I am an even number", "I am an odd number")}) : 
pageVars.numberType=="odd" ? 
SELECT(MAP(GENERATE_RANGE(0,495), {title: item+" element", content: IF(IS_EVEN(item), "I am an even number", "I am an odd number")}), item.content=="I am an odd number") : 
SELECT(MAP(GENERATE_RANGE(0,495), {title: item+" element", content: IF(IS_EVEN(item), "I am an even number", "I am an odd number")}), item.content=="I am an even number")

The above is basically a continuous “if…else” formula. But for Your use case it might be simpler:
ORDER(), or SORT()

Let me know if further assistance is required.
Cheers,
:man_technologist: :koala:

Hmm that’s interesting regarding the row component. Ill have to have a play to determine if our app is any faster using containers instead…