Skip to content
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

Conversation

jniles
Copy link
Collaborator

@jniles jniles commented May 26, 2021

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

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.
@jniles jniles requested a review from mbayopanda May 26, 2021 08:17
@jniles
Copy link
Collaborator Author

jniles commented Jun 2, 2021

@mbayopanda, can I get a review?

Copy link
Collaborator

@jmcameron jmcameron left a 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"
Copy link
Collaborator

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.

Copy link
Collaborator Author

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.

Copy link
Collaborator

@mbayopanda mbayopanda left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

LGTM 👍🏽

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>
Copy link
Collaborator

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

@jniles
Copy link
Collaborator Author

jniles commented Jun 7, 2021

bors r+

@bors
Copy link
Contributor

bors bot commented Jun 7, 2021

Build succeeded:

@bors bors bot merged commit b746f05 into Third-Culture-Software:master Jun 7, 2021
@jniles jniles deleted the feat-add-loading-icon-to-bhDepotSelect branch June 7, 2021 13:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bhDepotSelect should show loading indicator while searching
3 participants