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.
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.