Each function lags page load

General
1

Hi Everyone,

I have an app that loads an array out of JSON into an each function on a page.
It then prints out data from each part of the array onto the page in a panel, this panel also loads an image from the URL in the JSON data.
Being that there are a few items in the array, this seems to take a bit of time.

When clicking on the button that takes you to that page, everything seems to stop or lag for a second and then eventually moves to the new page.

My question is, is there a way to wait for the page to load (with an indicator for example) before it moves over? Or a way to load the each data after the page has loaded without the lag?

Thanks,

2

Hi Michael,
you’d likely benefit from using Deferred inside of your Each in this case, supposedly together with a WhileBusy to display some sort of a placeholder visual until the actual list item contents are loaded.

Since the Deferred feature is still very young at the time of this writing (introduced in 0.25), there are not much about it in the docs, just this: https://www.fusetools.com/docs/fuse/deferred

However, you might find some more stuff if you search the site and forums for both “Deferred” and “WhileBusy”.

3

Thanks for the quick reply Uldis.

Deferred seemed to work to make the page transition almost instant, but now it introduces extra panels that shouldn’t be there? It also seems very clunky when introducing the panels one by one.

4

The extra panels are a known bug AFAIK, and you can temporarily fixe that by wrapping your Deferred inside of another Panel (Each/Panel/Deferred). We’ve been told the extra panel won’t be required following one of the next releases including the fix.

The clunkiness you refer to can be smoothed out if you use the WhileBusy to put placeholder visuals of exactly the same size of what the list items will be. In my approach, I’m having a very-similar-looking Panel with circles and rectangles in those places where the actual content will be once the data is there.

Hope this helps!

5

Each/Panel/Deferred worked perfectly!

Could you give an example of the WhileBusy method?

Thanks again,

6

It should be as simple as this:

<WhileBusy>
    <ListItemPlaceholder />
</WhileBusy>
<Deferred>
    <ListItem />
</Deferred>

Where those ListItem and ListItemPlaceholder things are custom visual elements that you build elsewhere using ux:Class. Needless to say, those two should look very similar - I’d say that the background color and height are the most important factors to avoid the perceived clunkiness.