diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-05-10 18:52:09 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-05-10 18:52:09 +0300 |
commit | d1da5624d74b6ae6ea779df1485c661fa3014fd8 (patch) | |
tree | 36d60d37889a826bbdd020608c1bf10af09f6fe7 /app/assets/javascripts/deploy_keys/components | |
parent | a8fb310cec6224b175d3b6152ad0943f06b29185 (diff) |
Tech debt: Creates vue component for loading icon
Diffstat (limited to 'app/assets/javascripts/deploy_keys/components')
-rw-r--r-- | app/assets/javascripts/deploy_keys/components/action_btn.vue | 13 | ||||
-rw-r--r-- | app/assets/javascripts/deploy_keys/components/app.vue | 16 |
2 files changed, 14 insertions, 15 deletions
diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue index 3ff3a9d977e..3f993213dd0 100644 --- a/app/assets/javascripts/deploy_keys/components/action_btn.vue +++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue @@ -1,5 +1,6 @@ <script> import eventHub from '../eventhub'; + import loadingIcon from '../../vue_shared/components/loading_icon.vue'; export default { data() { @@ -22,6 +23,11 @@ default: 'btn-default', }, }, + + components: { + loadingIcon, + }, + methods: { doAction() { this.isLoading = true; @@ -44,11 +50,6 @@ :disabled="isLoading" @click="doAction"> {{ text }} - <i - v-if="isLoading" - class="fa fa-spinner fa-spin" - aria-hidden="true" - aria-label="Loading"> - </i> + <loading-icon v-if="isLoading" /> </button> </template> diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue index 7315a9e11cb..5f6eed0c67c 100644 --- a/app/assets/javascripts/deploy_keys/components/app.vue +++ b/app/assets/javascripts/deploy_keys/components/app.vue @@ -4,6 +4,7 @@ import DeployKeysService from '../service'; import DeployKeysStore from '../store'; import keysPanel from './keys_panel.vue'; + import loadingIcon from '../../vue_shared/components/loading_icon.vue'; export default { data() { @@ -28,6 +29,7 @@ }, components: { keysPanel, + loadingIcon, }, methods: { fetchKeys() { @@ -74,15 +76,11 @@ <template> <div class="col-lg-9 col-lg-offset-3 append-bottom-default deploy-keys"> - <div - class="text-center" - v-if="isLoading && !hasKeys"> - <i - class="fa fa-spinner fa-spin fa-2x" - aria-hidden="true" - aria-label="Loading deploy keys"> - </i> - </div> + <loading-icon + v-if="isLoading && !hasKeys" + size="2" + label="Loading deploy keys" + /> <div v-else-if="hasKeys"> <keys-panel title="Enabled deploy keys for this project" |