Progress Bar While Data Is Loading

If you are loading a large amount of data or the user has a slow connection, it is best to not show the page content until everything is loaded.

Example Page

In this example, the Suppliers page has a breadcrumb, table and add button:

The suppliers array is set to read automatically.

Add a Progress Bar

Start by adding a progress bar and setting the mode to "indeterminate":

If you run your app like this, the progress bar will always be shown and that is not very helpful.

Make the Progress Bar Conditional

Add an "if" attribute to the progress bar and only show it when the suppliers array is reading:

That's a little better but the breadcrumb and table move down to make room for the progress bar and then move back up again after the suppliers are read - not very nice.

Make the Rest of the Page Conditional

Add a container after the progress bar, set it to be conditional and move the rest of the page content into the container:

Progress Bar for Multiple Reads

If the progress bar should be shown until multiple things are read, you can make the progress bar condition an "or":

supplier.reading || locations.reading

And the container condition and "and":

!supplier.reading && !locations.reading

Progress Bar with Post Processing

If you need to complete other processing after the information is read, you can add a "loading" boolean property and set that after your processing is complete.