Currently, when the slow-loading credit card information is loading, we see nothing under the “Billing Info” title. It’s not clear to the user if anything is actually happening. This can be frustrating and confusing. Users are often happy to wait if something needs to take a while, so in those rare cases, feedback that we’re still working can reduce this frustration and make it clear that the page is still working.
Bootstrap has a progress bar UI component that can be animated using only CSS animations. If we show this while the credit card information is loading, our UI will have some motion to it and allow us to indicate to the user that some information hasn’t come in yet, but that the page is still working on it.
The basic outline of this UI component is as follows:
| | <aside class="progress"> |
| | <div class="progress-bar" |
| | role="progressbar" |
| | style="width: 45%"> |
| | Loading… |
| | </div> |
| | </aside> |
As with other Bootstrap UI components, you can customize this one by adding more classes on the inner div. You’ll also notice that the style attribute is used to control the amount progress. In our case, the only progress we can report is that we’re still loading, so we’ll set the width to 100% so it simulates an indeterminate progress bar.
As mentioned earlier, we are ultimately using this to provide some animation to users to let them know the request is happening. To achieve that, we’ll add progress-bar-striped and active to the inner div. We’ll also use progress-bar-info so that the progress bar uses a different shade of blue than our customer information panel, making it stand out a bit more:
| | </article> |
| » | <aside class="progress" *ngIf="!credit_card_info"> |
| » | <div class="progress-bar progress-bar-info progress-bar-striped active" |
| » | role="progressbar" style="width: 100%"> |
| » | Loading... |
| » | </div> |
| » | </aside> |
Note also that we’ve used *ngIf="!credit_card_info" on the aside. This ensures that the animated progress bar only shows when we haven’t yet received the credit card information from CustomerDetailsComponent.
Now, when you load the page, you’ll see a nice, animated indicator that loading is happening, as shown in the screen that follows.
After a couple seconds, the data will be loaded, and the progress bar will be replaced with the credit card UI, as shown in the next screen.
With Angular’s component-based and asynchronous design, we were able to show the user as much data as we could, as it became available. With Bootstrap’s library of UI components, we easily found a way to give the user some feedback that a long-running request was happening.