-
Notifications
You must be signed in to change notification settings - Fork 105
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(depots): add loading icon for depot select #5705
feat(depots): add loading icon for depot select #5705
Conversation
Adds a loading indicator (hourglass) to the bhDepotSelect so that users are aware that the component is loading, even in a slow connection. Closes Third-Culture-Software#5704.
@mbayopanda, can I get a review? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The code looks good.
I was not able to test it thoroughly because the databases I used had a small enough number of depots the look was essentially instant and I never saw the hour-glass.
@@ -1,6 +1,6 @@ | |||
<div ng-form="DepotForm" bh-depot-select ng-model-options="{ updateOn: 'default' }"> | |||
<div | |||
class="form-group" | |||
class="form-group has-feedback" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this necessary? it seems like we have some forms that use the $loading flag that do not use it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, to show the icon on the input, the has-feedback
class does the magic.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
typeahead-template-url="/modules/templates/depotList.tmpl.html" | ||
typeahead-on-select="$ctrl.onSelect($item, $model)" | ||
typeahead-min-length="0" | ||
autocomplete="off" | ||
translate-attr="{ 'placeholder': 'FORM.SELECT.DEPOT' }" | ||
ng-required="$ctrl.required"> | ||
|
||
<span ng-show="$ctrl.$loading" class="glyphicon glyphicon-hourglass form-control-feedback"></span> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
glyphicon
😄 ça fait très longtemps. 👍🏽
bors r+ |
Build succeeded: |
Adds a loading indicator (hourglass) to the bhDepotSelect so that users are aware that the component is loading, even in a slow connection.
Closes #5704.
Here is what it looks like:
![3KBGXuPPNa](https://user-images.githubusercontent.com/896472/119626041-19b2d480-be0b-11eb-9536-a80cc0d63ce3.gif)