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?
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.
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”.
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.
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!
Each/Panel/Deferred worked perfectly!
Could you give an example of the WhileBusy method?
It should be as simple as this:
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.