Commit f815b48f authored by Clement Ho's avatar Clement Ho Committed by Mike Greiling

Use gitlab-ui loading icon

parent 85aeaf05
<script> <script>
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Tooltip from '~/vue_shared/directives/tooltip'; import Tooltip from '~/vue_shared/directives/tooltip';
export default { export default {
name: 'Badge', name: 'Badge',
components: { components: {
Icon, Icon,
LoadingIcon,
Tooltip, Tooltip,
}, },
directives: { directives: {
...@@ -80,7 +78,7 @@ export default { ...@@ -80,7 +78,7 @@ export default {
/> />
</a> </a>
<loading-icon <gl-loading-icon
v-show="isLoading" v-show="isLoading"
:inline="true" :inline="true"
/> />
......
...@@ -4,7 +4,6 @@ import { mapActions, mapState } from 'vuex'; ...@@ -4,7 +4,6 @@ import { mapActions, mapState } from 'vuex';
import createFlash from '~/flash'; import createFlash from '~/flash';
import { s__, sprintf } from '~/locale'; import { s__, sprintf } from '~/locale';
import LoadingButton from '~/vue_shared/components/loading_button.vue'; import LoadingButton from '~/vue_shared/components/loading_button.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import createEmptyBadge from '../empty_badge'; import createEmptyBadge from '../empty_badge';
import Badge from './badge.vue'; import Badge from './badge.vue';
...@@ -15,7 +14,6 @@ export default { ...@@ -15,7 +14,6 @@ export default {
components: { components: {
Badge, Badge,
LoadingButton, LoadingButton,
LoadingIcon,
}, },
props: { props: {
isEditing: { isEditing: {
...@@ -207,7 +205,7 @@ export default { ...@@ -207,7 +205,7 @@ export default {
:link-url="renderedLinkUrl" :link-url="renderedLinkUrl"
/> />
<p v-show="isRendering"> <p v-show="isRendering">
<loading-icon <gl-loading-icon
:inline="true" :inline="true"
/> />
</p> </p>
......
<script> <script>
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import BadgeListRow from './badge_list_row.vue'; import BadgeListRow from './badge_list_row.vue';
import { GROUP_BADGE } from '../constants'; import { GROUP_BADGE } from '../constants';
...@@ -8,7 +7,6 @@ export default { ...@@ -8,7 +7,6 @@ export default {
name: 'BadgeList', name: 'BadgeList',
components: { components: {
BadgeListRow, BadgeListRow,
LoadingIcon,
}, },
computed: { computed: {
...mapState(['badges', 'isLoading', 'kind']), ...mapState(['badges', 'isLoading', 'kind']),
...@@ -31,10 +29,10 @@ export default { ...@@ -31,10 +29,10 @@ export default {
class="badge badge-pill" class="badge badge-pill"
>{{ badges.length }}</span> >{{ badges.length }}</span>
</div> </div>
<loading-icon <gl-loading-icon
v-show="isLoading" v-show="isLoading"
:size="2"
class="card-body" class="card-body"
size="2"
/> />
<div <div
v-if="hasNoBadges" v-if="hasNoBadges"
......
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
import { mapActions, mapState } from 'vuex'; import { mapActions, mapState } from 'vuex';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import { PROJECT_BADGE } from '../constants'; import { PROJECT_BADGE } from '../constants';
import Badge from './badge.vue'; import Badge from './badge.vue';
...@@ -11,7 +10,6 @@ export default { ...@@ -11,7 +10,6 @@ export default {
components: { components: {
Badge, Badge,
Icon, Icon,
LoadingIcon,
}, },
props: { props: {
badge: { badge: {
...@@ -79,7 +77,7 @@ export default { ...@@ -79,7 +77,7 @@ export default {
name="remove" name="remove"
/> />
</button> </button>
<loading-icon <gl-loading-icon
v-show="badge.isDeleting" v-show="badge.isDeleting"
:inline="true" :inline="true"
/> />
......
...@@ -3,7 +3,6 @@ import Sortable from 'sortablejs'; ...@@ -3,7 +3,6 @@ import Sortable from 'sortablejs';
import boardNewIssue from './board_new_issue.vue'; import boardNewIssue from './board_new_issue.vue';
import boardCard from './board_card.vue'; import boardCard from './board_card.vue';
import eventHub from '../eventhub'; import eventHub from '../eventhub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
const Store = gl.issueBoards.BoardsStore; const Store = gl.issueBoards.BoardsStore;
...@@ -12,7 +11,6 @@ export default { ...@@ -12,7 +11,6 @@ export default {
components: { components: {
boardCard, boardCard,
boardNewIssue, boardNewIssue,
loadingIcon,
}, },
props: { props: {
groupId: { groupId: {
...@@ -217,7 +215,7 @@ export default { ...@@ -217,7 +215,7 @@ export default {
v-if="loading" v-if="loading"
class="board-list-loading text-center" class="board-list-loading text-center"
aria-label="Loading issues"> aria-label="Loading issues">
<loading-icon /> <gl-loading-icon />
</div> </div>
<board-new-issue <board-new-issue
v-if="list.type !== 'closed' && showIssueForm" v-if="list.type !== 'closed' && showIssueForm"
...@@ -245,7 +243,7 @@ export default { ...@@ -245,7 +243,7 @@ export default {
v-if="showCount" v-if="showCount"
class="board-list-count text-center" class="board-list-count text-center"
data-issue-id="-1"> data-issue-id="-1">
<loading-icon <gl-loading-icon
v-show="list.loadingMore" v-show="list.loadingMore"
label="Loading more issues" label="Loading more issues"
/> />
......
<script> <script>
/* global ListIssue */ /* global ListIssue */
import { urlParamsToObject } from '~/lib/utils/common_utils'; import { urlParamsToObject } from '~/lib/utils/common_utils';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import ModalHeader from './header.vue'; import ModalHeader from './header.vue';
import ModalList from './list.vue'; import ModalList from './list.vue';
import ModalFooter from './footer.vue'; import ModalFooter from './footer.vue';
...@@ -14,7 +13,6 @@ ...@@ -14,7 +13,6 @@
ModalHeader, ModalHeader,
ModalList, ModalList,
ModalFooter, ModalFooter,
loadingIcon,
}, },
props: { props: {
newIssuePath: { newIssuePath: {
...@@ -167,7 +165,7 @@ ...@@ -167,7 +165,7 @@
class="add-issues-list text-center" class="add-issues-list text-center"
> >
<div class="add-issues-list-loading"> <div class="add-issues-list-loading">
<loading-icon /> <gl-loading-icon />
</div> </div>
</section> </section>
<modal-footer/> <modal-footer/>
......
...@@ -2,14 +2,10 @@ ...@@ -2,14 +2,10 @@
import $ from 'jquery'; import $ from 'jquery';
import _ from 'underscore'; import _ from 'underscore';
import eventHub from '../eventhub'; import eventHub from '../eventhub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import Api from '../../api'; import Api from '../../api';
export default { export default {
name: 'BoardProjectSelect', name: 'BoardProjectSelect',
components: {
loadingIcon,
},
props: { props: {
groupId: { groupId: {
type: Number, type: Number,
...@@ -119,7 +115,7 @@ export default { ...@@ -119,7 +115,7 @@ export default {
</div> </div>
<div class="dropdown-content"></div> <div class="dropdown-content"></div>
<div class="dropdown-loading"> <div class="dropdown-loading">
<loading-icon /> <gl-loading-icon />
</div> </div>
</div> </div>
</div> </div>
......
...@@ -76,10 +76,10 @@ ...@@ -76,10 +76,10 @@
<template> <template>
<div class="content-list pipelines"> <div class="content-list pipelines">
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
:label="s__('Pipelines|Loading Pipelines')" :label="s__('Pipelines|Loading Pipelines')"
size="3" :size="3"
class="prepend-top-20" class="prepend-top-20"
/> />
......
import Vue from 'vue'; import Vue from 'vue';
import progressBar from '@gitlab-org/gitlab-ui/dist/components/base/progress_bar'; import progressBar from '@gitlab-org/gitlab-ui/dist/components/base/progress_bar';
import modal from '@gitlab-org/gitlab-ui/dist/components/base/modal'; import modal from '@gitlab-org/gitlab-ui/dist/components/base/modal';
import loadingIcon from '@gitlab-org/gitlab-ui/dist/components/base/loading_icon';
import dModal from '@gitlab-org/gitlab-ui/dist/directives/modal'; import dModal from '@gitlab-org/gitlab-ui/dist/directives/modal';
import dTooltip from '@gitlab-org/gitlab-ui/dist/directives/tooltip'; import dTooltip from '@gitlab-org/gitlab-ui/dist/directives/tooltip';
Vue.component('gl-progress-bar', progressBar); Vue.component('gl-progress-bar', progressBar);
Vue.component('gl-ui-modal', modal); Vue.component('gl-ui-modal', modal);
Vue.component('gl-loading-icon', loadingIcon);
Vue.directive('gl-modal', dModal); Vue.directive('gl-modal', dModal);
Vue.directive('gl-tooltip', dTooltip); Vue.directive('gl-tooltip', dTooltip);
<script> <script>
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import eventHub from '../eventhub'; import eventHub from '../eventhub';
export default { export default {
components: {
loadingIcon,
},
props: { props: {
deployKey: { deployKey: {
type: Object, type: Object,
...@@ -45,7 +41,7 @@ export default { ...@@ -45,7 +41,7 @@ export default {
class="btn" class="btn"
@click="doAction"> @click="doAction">
<slot></slot> <slot></slot>
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
:inline="true" :inline="true"
/> />
......
<script> <script>
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import Flash from '~/flash'; import Flash from '~/flash';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue'; import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
import eventHub from '../eventhub'; import eventHub from '../eventhub';
import DeployKeysService from '../service'; import DeployKeysService from '../service';
...@@ -11,7 +10,6 @@ import KeysPanel from './keys_panel.vue'; ...@@ -11,7 +10,6 @@ import KeysPanel from './keys_panel.vue';
export default { export default {
components: { components: {
KeysPanel, KeysPanel,
LoadingIcon,
NavigationTabs, NavigationTabs,
}, },
props: { props: {
...@@ -114,10 +112,10 @@ export default { ...@@ -114,10 +112,10 @@ export default {
<template> <template>
<div class="append-bottom-default deploy-keys"> <div class="append-bottom-default deploy-keys">
<loading-icon <gl-loading-icon
v-if="isLoading && !hasKeys" v-if="isLoading && !hasKeys"
:label="s__('DeployKeys|Loading deploy keys')" :label="s__('DeployKeys|Loading deploy keys')"
size="2" :size="2"
/> />
<template v-else-if="hasKeys"> <template v-else-if="hasKeys">
<div class="top-area scrolling-tabs-container inner-page-scroll-tabs"> <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
......
...@@ -4,7 +4,6 @@ import Icon from '~/vue_shared/components/icon.vue'; ...@@ -4,7 +4,6 @@ import Icon from '~/vue_shared/components/icon.vue';
import { __ } from '~/locale'; import { __ } from '~/locale';
import createFlash from '~/flash'; import createFlash from '~/flash';
import eventHub from '../../notes/event_hub'; import eventHub from '../../notes/event_hub';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
import CompareVersions from './compare_versions.vue'; import CompareVersions from './compare_versions.vue';
import ChangedFiles from './changed_files.vue'; import ChangedFiles from './changed_files.vue';
import DiffFile from './diff_file.vue'; import DiffFile from './diff_file.vue';
...@@ -15,7 +14,6 @@ export default { ...@@ -15,7 +14,6 @@ export default {
name: 'DiffsApp', name: 'DiffsApp',
components: { components: {
Icon, Icon,
LoadingIcon,
CompareVersions, CompareVersions,
ChangedFiles, ChangedFiles,
DiffFile, DiffFile,
...@@ -168,7 +166,7 @@ export default { ...@@ -168,7 +166,7 @@ export default {
v-if="isLoading" v-if="isLoading"
class="loading" class="loading"
> >
<loading-icon /> <gl-loading-icon />
</div> </div>
<div <div
v-else v-else
......
...@@ -3,7 +3,6 @@ import { mapActions, mapGetters } from 'vuex'; ...@@ -3,7 +3,6 @@ import { mapActions, mapGetters } from 'vuex';
import _ from 'underscore'; import _ from 'underscore';
import { __, sprintf } from '~/locale'; import { __, sprintf } from '~/locale';
import createFlash from '~/flash'; import createFlash from '~/flash';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import DiffFileHeader from './diff_file_header.vue'; import DiffFileHeader from './diff_file_header.vue';
import DiffContent from './diff_content.vue'; import DiffContent from './diff_content.vue';
...@@ -11,7 +10,6 @@ export default { ...@@ -11,7 +10,6 @@ export default {
components: { components: {
DiffFileHeader, DiffFileHeader,
DiffContent, DiffContent,
LoadingIcon,
}, },
props: { props: {
file: { file: {
...@@ -144,7 +142,7 @@ export default { ...@@ -144,7 +142,7 @@ export default {
:class="{ hidden: isCollapsed || file.tooLarge }" :class="{ hidden: isCollapsed || file.tooLarge }"
:diff-file="file" :diff-file="file"
/> />
<loading-icon <gl-loading-icon
v-if="showLoadingIcon" v-if="showLoadingIcon"
class="diff-content loading" class="diff-content loading"
/> />
......
<script> <script>
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tablePagination from '../../vue_shared/components/table_pagination.vue'; import tablePagination from '../../vue_shared/components/table_pagination.vue';
import environmentTable from '../components/environments_table.vue'; import environmentTable from '../components/environments_table.vue';
export default { export default {
components: { components: {
environmentTable, environmentTable,
loadingIcon,
tablePagination, tablePagination,
}, },
props: { props: {
...@@ -42,11 +40,11 @@ ...@@ -42,11 +40,11 @@
<template> <template>
<div class="environments-container"> <div class="environments-container">
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
:size="3"
class="prepend-top-default" class="prepend-top-default"
label="Loading environments" label="Loading environments"
size="3"
/> />
<slot name="emptyState"></slot> <slot name="emptyState"></slot>
......
<script> <script>
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
...@@ -9,7 +8,6 @@ export default { ...@@ -9,7 +8,6 @@ export default {
tooltip, tooltip,
}, },
components: { components: {
loadingIcon,
Icon, Icon,
}, },
props: { props: {
...@@ -67,7 +65,7 @@ export default { ...@@ -67,7 +65,7 @@ export default {
aria-hidden="true" aria-hidden="true"
> >
</i> </i>
<loading-icon v-if="isLoading" /> <gl-loading-icon v-if="isLoading" />
</span> </span>
</button> </button>
......
...@@ -9,12 +9,10 @@ import { s__ } from '~/locale'; ...@@ -9,12 +9,10 @@ import { s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
export default { export default {
components: { components: {
Icon, Icon,
LoadingIcon,
}, },
directives: { directives: {
...@@ -70,6 +68,6 @@ export default { ...@@ -70,6 +68,6 @@ export default {
v-else v-else
name="redo"/> name="redo"/>
<loading-icon v-if="isLoading" /> <gl-loading-icon v-if="isLoading" />
</button> </button>
</template> </template>
...@@ -2,13 +2,11 @@ ...@@ -2,13 +2,11 @@
/** /**
* Render environments table. * Render environments table.
*/ */
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import environmentItem from './environment_item.vue'; import environmentItem from './environment_item.vue';
export default { export default {
components: { components: {
environmentItem, environmentItem,
loadingIcon,
}, },
props: { props: {
...@@ -97,7 +95,7 @@ export default { ...@@ -97,7 +95,7 @@ export default {
<div <div
v-if="model.isLoadingFolderContent" v-if="model.isLoadingFolderContent"
:key="`loading-item-${i}`"> :key="`loading-item-${i}`">
<loading-icon size="2" /> <gl-loading-icon :size="2" />
</div> </div>
<template v-else> <template v-else>
......
...@@ -13,7 +13,6 @@ import eventHub from '../event_hub'; ...@@ -13,7 +13,6 @@ import eventHub from '../event_hub';
import EnvironmentsStore from '../stores/environments_store'; import EnvironmentsStore from '../stores/environments_store';
import EnvironmentsService from '../services/environments_service'; import EnvironmentsService from '../services/environments_service';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tablePagination from '../../vue_shared/components/table_pagination.vue'; import tablePagination from '../../vue_shared/components/table_pagination.vue';
import environmentTable from '../components/environments_table.vue'; import environmentTable from '../components/environments_table.vue';
import tabs from '../../vue_shared/components/navigation_tabs.vue'; import tabs from '../../vue_shared/components/navigation_tabs.vue';
...@@ -24,7 +23,6 @@ export default { ...@@ -24,7 +23,6 @@ export default {
components: { components: {
environmentTable, environmentTable,
container, container,
loadingIcon,
tabs, tabs,
tablePagination, tablePagination,
}, },
......
<script> <script>
import { mapState, mapActions, mapGetters } from 'vuex'; import { mapState, mapActions, mapGetters } from 'vuex';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import AccessorUtilities from '~/lib/utils/accessor'; import AccessorUtilities from '~/lib/utils/accessor';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import store from '../store/'; import store from '../store/';
...@@ -13,7 +12,6 @@ import frequentItemsMixin from './frequent_items_mixin'; ...@@ -13,7 +12,6 @@ import frequentItemsMixin from './frequent_items_mixin';
export default { export default {
store, store,
components: { components: {
LoadingIcon,
FrequentItemsSearchInput, FrequentItemsSearchInput,
FrequentItemsList, FrequentItemsList,
}, },
...@@ -98,11 +96,11 @@ export default { ...@@ -98,11 +96,11 @@ export default {
<frequent-items-search-input <frequent-items-search-input
:namespace="namespace" :namespace="namespace"
/> />
<loading-icon <gl-loading-icon
v-if="isLoadingItems" v-if="isLoadingItems"
:label="translations.loadingMessage" :label="translations.loadingMessage"
:size="2"
class="loading-animation prepend-top-20" class="loading-animation prepend-top-20"
size="2"
/> />
<div <div
v-if="!isLoadingItems && !hasSearchQuery" v-if="!isLoadingItems && !hasSearchQuery"
......
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
import $ from 'jquery'; import $ from 'jquery';
import { s__, sprintf } from '~/locale'; import { s__, sprintf } from '~/locale';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
import { HIDDEN_CLASS } from '~/lib/utils/constants'; import { HIDDEN_CLASS } from '~/lib/utils/constants';
import { getParameterByName } from '~/lib/utils/common_utils'; import { getParameterByName } from '~/lib/utils/common_utils';
...@@ -15,7 +14,6 @@ import groupsComponent from './groups.vue'; ...@@ -15,7 +14,6 @@ import groupsComponent from './groups.vue';
export default { export default {
components: { components: {
loadingIcon,
DeprecatedModal, DeprecatedModal,
groupsComponent, groupsComponent,
}, },
...@@ -241,11 +239,11 @@ export default { ...@@ -241,11 +239,11 @@ export default {
<template> <template>
<div> <div>
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
:label="s__('GroupsTree|Loading groups')" :label="s__('GroupsTree|Loading groups')"
:size="2"
class="loading-animation prepend-top-20" class="loading-animation prepend-top-20"
size="2"
/> />
<groups-component <groups-component
v-if="!isLoading" v-if="!isLoading"
......
<script> <script>
import { mapActions, mapState } from 'vuex'; import { mapActions, mapState } from 'vuex';
import _ from 'underscore'; import _ from 'underscore';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import Item from './item.vue'; import Item from './item.vue';
export default { export default {
components: { components: {
LoadingIcon,
Item, Item,
Icon, Icon,
}, },
...@@ -76,10 +74,10 @@ export default { ...@@ -76,10 +74,10 @@ export default {
</div> </div>
</div> </div>
<div class="dropdown-content ide-merge-requests-dropdown-content d-flex"> <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
:size="2"
class="mt-3 mb-3 align-self-center ml-auto mr-auto" class="mt-3 mb-3 align-self-center ml-auto mr-auto"
size="2"
/> />
<ul <ul
v-else v-else
......
<script> <script>
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
export default { export default {
components: {
LoadingIcon,
},
props: { props: {
message: { message: {
type: Object, type: Object,
...@@ -59,7 +55,7 @@ export default { ...@@ -59,7 +55,7 @@ export default {
@click.stop.prevent="clickAction" @click.stop.prevent="clickAction"
> >
{{ message.actionText }} {{ message.actionText }}
<loading-icon <gl-loading-icon
v-show="isLoading" v-show="isLoading"
inline inline
/> />
......
<script> <script>
import $ from 'jquery'; import $ from 'jquery';
import { mapActions, mapState } from 'vuex'; import { mapActions, mapState } from 'vuex';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue'; import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
export default { export default {
components: { components: {
DropdownButton, DropdownButton,
LoadingIcon,
}, },
props: { props: {
data: { data: {
...@@ -102,9 +100,9 @@ export default { ...@@ -102,9 +100,9 @@ export default {
></i> ></i>
</div> </div>
<div class="dropdown-content"> <div class="dropdown-content">
<loading-icon <gl-loading-icon
v-if="showLoading" v-if="showLoading"
size="2" :size="2"
/> />
<ul v-else> <ul v-else>
<li <li
......
<script> <script>
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
import Stage from './stage.vue'; import Stage from './stage.vue';
export default { export default {
components: { components: {
LoadingIcon,
Stage, Stage,
}, },
props: { props: {
...@@ -26,10 +24,10 @@ export default { ...@@ -26,10 +24,10 @@ export default {
<template> <template>
<div> <div>
<loading-icon <gl-loading-icon
v-if="loading && !stages.length" v-if="loading && !stages.length"
:size="2"
class="prepend-top-default" class="prepend-top-default"
size="2"
/> />
<template v-else> <template v-else>
<stage <stage
......
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
import tooltip from '../../../vue_shared/directives/tooltip'; import tooltip from '../../../vue_shared/directives/tooltip';
import Icon from '../../../vue_shared/components/icon.vue'; import Icon from '../../../vue_shared/components/icon.vue';
import CiIcon from '../../../vue_shared/components/ci_icon.vue'; import CiIcon from '../../../vue_shared/components/ci_icon.vue';
import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
import Item from './item.vue'; import Item from './item.vue';
export default { export default {
...@@ -12,7 +11,6 @@ export default { ...@@ -12,7 +11,6 @@ export default {
components: { components: {
Icon, Icon,
CiIcon, CiIcon,
LoadingIcon,
Item, Item,
}, },
props: { props: {
...@@ -96,7 +94,7 @@ export default { ...@@ -96,7 +94,7 @@ export default {
v-show="!stage.isCollapsed" v-show="!stage.isCollapsed"
class="card-body" class="card-body"
> >
<loading-icon <gl-loading-icon
v-if="showLoadingIcon" v-if="showLoadingIcon"
/> />
<template v-else> <template v-else>
......
...@@ -3,7 +3,6 @@ import { mapActions, mapState } from 'vuex'; ...@@ -3,7 +3,6 @@ import { mapActions, mapState } from 'vuex';
import _ from 'underscore'; import _ from 'underscore';
import { __ } from '~/locale'; import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Item from './item.vue'; import Item from './item.vue';
import TokenedInput from '../shared/tokened_input.vue'; import TokenedInput from '../shared/tokened_input.vue';
...@@ -14,7 +13,6 @@ const SEARCH_TYPES = [ ...@@ -14,7 +13,6 @@ const SEARCH_TYPES = [
export default { export default {
components: { components: {
LoadingIcon,
TokenedInput, TokenedInput,
Item, Item,
Icon, Icon,
...@@ -98,10 +96,10 @@ export default { ...@@ -98,10 +96,10 @@ export default {
</div> </div>
</div> </div>
<div class="dropdown-content ide-merge-requests-dropdown-content d-flex"> <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
:size="2"
class="mt-3 mb-3 align-self-center ml-auto mr-auto" class="mt-3 mb-3 align-self-center ml-auto mr-auto"
size="2"
/> />
<template v-else> <template v-else>
<ul <ul
......
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
import { mapActions, mapGetters, mapState } from 'vuex'; import { mapActions, mapGetters, mapState } from 'vuex';
import _ from 'underscore'; import _ from 'underscore';
import { sprintf, __ } from '../../../locale'; import { sprintf, __ } from '../../../locale';
import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
import Icon from '../../../vue_shared/components/icon.vue'; import Icon from '../../../vue_shared/components/icon.vue';
import CiIcon from '../../../vue_shared/components/ci_icon.vue'; import CiIcon from '../../../vue_shared/components/ci_icon.vue';
import Tabs from '../../../vue_shared/components/tabs/tabs'; import Tabs from '../../../vue_shared/components/tabs/tabs';
...@@ -12,7 +11,6 @@ import JobsList from '../jobs/list.vue'; ...@@ -12,7 +11,6 @@ import JobsList from '../jobs/list.vue';
export default { export default {
components: { components: {
LoadingIcon,
Icon, Icon,
CiIcon, CiIcon,
Tabs, Tabs,
...@@ -50,10 +48,10 @@ export default { ...@@ -50,10 +48,10 @@ export default {
<template> <template>
<div class="ide-pipeline"> <div class="ide-pipeline">
<loading-icon <gl-loading-icon
v-if="showLoadingIcon" v-if="showLoadingIcon"
:size="2"
class="prepend-top-default" class="prepend-top-default"
size="2"
/> />
<template v-else-if="latestPipeline !== null"> <template v-else-if="latestPipeline !== null">
<header <header
......
...@@ -3,14 +3,12 @@ import { mapActions, mapGetters, mapState } from 'vuex'; ...@@ -3,14 +3,12 @@ import { mapActions, mapGetters, mapState } from 'vuex';
import _ from 'underscore'; import _ from 'underscore';
import { Manager } from 'smooshpack'; import { Manager } from 'smooshpack';
import { listen } from 'codesandbox-api'; import { listen } from 'codesandbox-api';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Navigator from './navigator.vue'; import Navigator from './navigator.vue';
import { packageJsonPath } from '../../constants'; import { packageJsonPath } from '../../constants';
import { createPathWithExt } from '../../utils'; import { createPathWithExt } from '../../utils';
export default { export default {
components: { components: {
LoadingIcon,
Navigator, Navigator,
}, },
data() { data() {
...@@ -177,9 +175,9 @@ export default { ...@@ -177,9 +175,9 @@ export default {
{{ s__('IDE|Get started with Live Preview') }} {{ s__('IDE|Get started with Live Preview') }}
</a> </a>
</div> </div>
<loading-icon <gl-loading-icon
v-else v-else
size="2" :size="2"
class="align-self-center mt-auto mb-auto" class="align-self-center mt-auto mb-auto"
/> />
</div> </div>
......
<script> <script>
import { listen } from 'codesandbox-api'; import { listen } from 'codesandbox-api';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
export default { export default {
components: { components: {
Icon, Icon,
LoadingIcon,
}, },
props: { props: {
manager: { manager: {
...@@ -138,7 +136,7 @@ export default { ...@@ -138,7 +136,7 @@ export default {
class="ide-navigator-location form-control bg-white" class="ide-navigator-location form-control bg-white"
readonly readonly
/> />
<loading-icon <gl-loading-icon
v-if="loading" v-if="loading"
class="position-absolute ide-preview-loading-icon" class="position-absolute ide-preview-loading-icon"
/> />
......
<script> <script>
import ciHeader from '../../vue_shared/components/header_ci_component.vue'; import ciHeader from '../../vue_shared/components/header_ci_component.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import callout from '../../vue_shared/components/callout.vue'; import callout from '../../vue_shared/components/callout.vue';
export default { export default {
name: 'JobHeaderSection', name: 'JobHeaderSection',
components: { components: {
ciHeader, ciHeader,
loadingIcon,
callout, callout,
}, },
props: { props: {
...@@ -82,9 +80,9 @@ export default { ...@@ -82,9 +80,9 @@ export default {
:should-render-triggered-label="jobStarted" :should-render-triggered-label="jobStarted"
item-name="Job" item-name="Job"
/> />
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
size="2" :size="2"
class="prepend-top-default append-bottom-default" class="prepend-top-default append-bottom-default"
/> />
</div> </div>
......
<script> <script>
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago'; import timeagoMixin from '~/vue_shared/mixins/timeago';
import { timeIntervalInWords } from '~/lib/utils/datetime_utility'; import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
...@@ -9,7 +8,6 @@ export default { ...@@ -9,7 +8,6 @@ export default {
name: 'SidebarDetailsBlock', name: 'SidebarDetailsBlock',
components: { components: {
DetailRow, DetailRow,
LoadingIcon,
Icon, Icon,
}, },
mixins: [timeagoMixin], mixins: [timeagoMixin],
...@@ -232,10 +230,10 @@ export default { ...@@ -232,10 +230,10 @@ export default {
</div> </div>
</div> </div>
</template> </template>
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
:size="2"
class="prepend-top-10" class="prepend-top-10"
size="2"
/> />
</div> </div>
</template> </template>
...@@ -7,7 +7,6 @@ import editSvg from 'icons/_icon_pencil.svg'; ...@@ -7,7 +7,6 @@ import editSvg from 'icons/_icon_pencil.svg';
import resolveDiscussionSvg from 'icons/_icon_resolve_discussion.svg'; import resolveDiscussionSvg from 'icons/_icon_resolve_discussion.svg';
import resolvedDiscussionSvg from 'icons/_icon_status_success_solid.svg'; import resolvedDiscussionSvg from 'icons/_icon_status_success_solid.svg';
import ellipsisSvg from 'icons/_ellipsis_v.svg'; import ellipsisSvg from 'icons/_ellipsis_v.svg';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
export default { export default {
...@@ -15,9 +14,6 @@ export default { ...@@ -15,9 +14,6 @@ export default {
directives: { directives: {
tooltip, tooltip,
}, },
components: {
loadingIcon,
},
props: { props: {
authorId: { authorId: {
type: Number, type: Number,
...@@ -153,9 +149,9 @@ export default { ...@@ -153,9 +149,9 @@ export default {
v-else v-else
v-html="resolveDiscussionSvg"></div> v-html="resolveDiscussionSvg"></div>
</template> </template>
<loading-icon <gl-loading-icon
v-else v-else
:inline="true" inline
/> />
</button> </button>
</div> </div>
...@@ -172,7 +168,7 @@ export default { ...@@ -172,7 +168,7 @@ export default {
href="#" href="#"
title="Add reaction" title="Add reaction"
> >
<loading-icon :inline="true" /> <gl-loading-icon inline/>
<span <span
class="link-highlight award-control-icon-neutral" class="link-highlight award-control-icon-neutral"
v-html="emojiSmiling"> v-html="emojiSmiling">
......
...@@ -10,7 +10,6 @@ import systemNote from '../../vue_shared/components/notes/system_note.vue'; ...@@ -10,7 +10,6 @@ import systemNote from '../../vue_shared/components/notes/system_note.vue';
import commentForm from './comment_form.vue'; import commentForm from './comment_form.vue';
import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue'; import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue'; import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue'; import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue';
export default { export default {
...@@ -20,7 +19,6 @@ export default { ...@@ -20,7 +19,6 @@ export default {
noteableDiscussion, noteableDiscussion,
systemNote, systemNote,
commentForm, commentForm,
loadingIcon,
placeholderNote, placeholderNote,
placeholderSystemNote, placeholderSystemNote,
}, },
......
<script> <script>
import _ from 'underscore'; import _ from 'underscore';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import StageColumnComponent from './stage_column_component.vue'; import StageColumnComponent from './stage_column_component.vue';
export default { export default {
components: { components: {
StageColumnComponent, StageColumnComponent,
LoadingIcon,
}, },
props: { props: {
isLoading: { isLoading: {
...@@ -59,9 +57,9 @@ export default { ...@@ -59,9 +57,9 @@ export default {
<div class="build-content middle-block js-pipeline-graph"> <div class="build-content middle-block js-pipeline-graph">
<div class="pipeline-visualization pipeline-graph pipeline-tab-content"> <div class="pipeline-visualization pipeline-graph pipeline-tab-content">
<div class="text-center"> <div class="text-center">
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
size="3" :size="3"
/> />
</div> </div>
......
<script> <script>
import ciHeader from '../../vue_shared/components/header_ci_component.vue'; import ciHeader from '../../vue_shared/components/header_ci_component.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default { export default {
name: 'PipelineHeaderSection', name: 'PipelineHeaderSection',
components: { components: {
ciHeader, ciHeader,
loadingIcon,
}, },
props: { props: {
pipeline: { pipeline: {
...@@ -89,9 +87,9 @@ export default { ...@@ -89,9 +87,9 @@ export default {
item-name="Pipeline" item-name="Pipeline"
@actionClicked="postAction" @actionClicked="postAction"
/> />
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
size="2" :size="2"
class="prepend-top-default append-bottom-default" class="prepend-top-default append-bottom-default"
/> />
</div> </div>
......
...@@ -319,10 +319,10 @@ export default { ...@@ -319,10 +319,10 @@ export default {
<div class="content-list pipelines"> <div class="content-list pipelines">
<loading-icon <gl-loading-icon
v-if="stateToRender === $options.stateMap.loading" v-if="stateToRender === $options.stateMap.loading"
:label="s__('Pipelines|Loading Pipelines')" :label="s__('Pipelines|Loading Pipelines')"
size="3" :size="3"
class="prepend-top-20" class="prepend-top-20"
/> />
......
<script> <script>
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import icon from '../../vue_shared/components/icon.vue'; import icon from '../../vue_shared/components/icon.vue';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
...@@ -9,7 +8,6 @@ export default { ...@@ -9,7 +8,6 @@ export default {
tooltip, tooltip,
}, },
components: { components: {
loadingIcon,
icon, icon,
}, },
props: { props: {
...@@ -60,7 +58,7 @@ export default { ...@@ -60,7 +58,7 @@ export default {
class="fa fa-caret-down" class="fa fa-caret-down"
aria-hidden="true"> aria-hidden="true">
</i> </i>
<loading-icon v-if="isLoading" /> <gl-loading-icon v-if="isLoading" />
</button> </button>
<ul class="dropdown-menu dropdown-menu-right"> <ul class="dropdown-menu dropdown-menu-right">
......
...@@ -18,14 +18,12 @@ import Flash from '../../flash'; ...@@ -18,14 +18,12 @@ import Flash from '../../flash';
import axios from '../../lib/utils/axios_utils'; import axios from '../../lib/utils/axios_utils';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import Icon from '../../vue_shared/components/icon.vue'; import Icon from '../../vue_shared/components/icon.vue';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
import JobComponent from './graph/job_component.vue'; import JobComponent from './graph/job_component.vue';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
import { PIPELINES_TABLE } from '../constants'; import { PIPELINES_TABLE } from '../constants';
export default { export default {
components: { components: {
LoadingIcon,
Icon, Icon,
JobComponent, JobComponent,
}, },
...@@ -191,7 +189,7 @@ export default { ...@@ -191,7 +189,7 @@ export default {
class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container" class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"
aria-labelledby="stageDropdown" aria-labelledby="stageDropdown"
> >
<loading-icon v-if="isLoading"/> <gl-loading-icon v-if="isLoading"/>
<ul <ul
v-else v-else
class="js-builds-dropdown-list scrollable-menu" class="js-builds-dropdown-list scrollable-menu"
......
...@@ -4,7 +4,6 @@ import Flash from '../../flash'; ...@@ -4,7 +4,6 @@ import Flash from '../../flash';
import Poll from '../../lib/utils/poll'; import Poll from '../../lib/utils/poll';
import EmptyState from '../components/empty_state.vue'; import EmptyState from '../components/empty_state.vue';
import SvgBlankState from '../components/blank_state.vue'; import SvgBlankState from '../components/blank_state.vue';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
import PipelinesTableComponent from '../components/pipelines_table.vue'; import PipelinesTableComponent from '../components/pipelines_table.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import { CANCEL_REQUEST } from '../constants'; import { CANCEL_REQUEST } from '../constants';
...@@ -14,7 +13,6 @@ export default { ...@@ -14,7 +13,6 @@ export default {
PipelinesTableComponent, PipelinesTableComponent,
SvgBlankState, SvgBlankState,
EmptyState, EmptyState,
LoadingIcon,
}, },
data() { data() {
return { return {
......
import _ from 'underscore'; import _ from 'underscore';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue'; import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue'; import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue'; import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
...@@ -9,7 +8,6 @@ import store from '../store'; ...@@ -9,7 +8,6 @@ import store from '../store';
export default { export default {
store, store,
components: { components: {
LoadingIcon,
DropdownButton, DropdownButton,
DropdownSearchInput, DropdownSearchInput,
DropdownHiddenInput, DropdownHiddenInput,
......
...@@ -126,7 +126,7 @@ export default { ...@@ -126,7 +126,7 @@ export default {
</ul> </ul>
</div> </div>
<div class="dropdown-loading"> <div class="dropdown-loading">
<loading-icon /> <gl-loading-icon />
</div> </div>
</div> </div>
</div> </div>
......
...@@ -187,7 +187,7 @@ export default { ...@@ -187,7 +187,7 @@ export default {
</ul> </ul>
</div> </div>
<div class="dropdown-loading"> <div class="dropdown-loading">
<loading-icon /> <gl-loading-icon />
</div> </div>
</div> </div>
</div> </div>
......
...@@ -100,7 +100,7 @@ export default { ...@@ -100,7 +100,7 @@ export default {
</ul> </ul>
</div> </div>
<div class="dropdown-loading"> <div class="dropdown-loading">
<loading-icon /> <gl-loading-icon />
</div> </div>
</div> </div>
</div> </div>
......
<script> <script>
import Visibility from 'visibilityjs'; import Visibility from 'visibilityjs';
import ciIcon from '~/vue_shared/components/ci_icon.vue'; import ciIcon from '~/vue_shared/components/ci_icon.vue';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import Poll from '~/lib/utils/poll'; import Poll from '~/lib/utils/poll';
import Flash from '~/flash'; import Flash from '~/flash';
import { s__, sprintf } from '~/locale'; import { s__, sprintf } from '~/locale';
...@@ -14,7 +13,6 @@ export default { ...@@ -14,7 +13,6 @@ export default {
}, },
components: { components: {
ciIcon, ciIcon,
loadingIcon,
}, },
props: { props: {
endpoint: { endpoint: {
...@@ -100,10 +98,10 @@ export default { ...@@ -100,10 +98,10 @@ export default {
</script> </script>
<template> <template>
<div class="ci-status-link"> <div class="ci-status-link">
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
:size="3"
label="Loading pipeline status" label="Loading pipeline status"
size="3"
/> />
<a <a
v-else v-else
......
<script> <script>
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import Flash from '../../flash'; import Flash from '../../flash';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import store from '../stores'; import store from '../stores';
import collapsibleContainer from './collapsible_container.vue'; import collapsibleContainer from './collapsible_container.vue';
import { errorMessages, errorMessagesTypes } from '../constants'; import { errorMessages, errorMessagesTypes } from '../constants';
...@@ -10,7 +9,6 @@ ...@@ -10,7 +9,6 @@
name: 'RegistryListApp', name: 'RegistryListApp',
components: { components: {
collapsibleContainer, collapsibleContainer,
loadingIcon,
}, },
props: { props: {
endpoint: { endpoint: {
...@@ -42,9 +40,9 @@ ...@@ -42,9 +40,9 @@
</script> </script>
<template> <template>
<div> <div>
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
size="3" :size="3"
/> />
<collapsible-container <collapsible-container
......
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import Flash from '../../flash'; import Flash from '../../flash';
import clipboardButton from '../../vue_shared/components/clipboard_button.vue'; import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
import tableRegistry from './table_registry.vue'; import tableRegistry from './table_registry.vue';
import { errorMessages, errorMessagesTypes } from '../constants'; import { errorMessages, errorMessagesTypes } from '../constants';
...@@ -12,7 +11,6 @@ ...@@ -12,7 +11,6 @@
name: 'CollapsibeContainerRegisty', name: 'CollapsibeContainerRegisty',
components: { components: {
clipboardButton, clipboardButton,
loadingIcon,
tableRegistry, tableRegistry,
}, },
directives: { directives: {
...@@ -107,10 +105,10 @@ ...@@ -107,10 +105,10 @@
</div> </div>
</div> </div>
<loading-icon <gl-loading-icon
v-if="repo.isLoading" v-if="repo.isLoading"
:size="2"
class="append-bottom-20" class="append-bottom-20"
size="2"
/> />
<div <div
......
<script> <script>
import CiIcon from '~/vue_shared/components/ci_icon.vue'; import CiIcon from '~/vue_shared/components/ci_icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Popover from '~/vue_shared/components/help_popover.vue'; import Popover from '~/vue_shared/components/help_popover.vue';
/** /**
...@@ -15,7 +14,6 @@ export default { ...@@ -15,7 +14,6 @@ export default {
name: 'ReportSummaryRow', name: 'ReportSummaryRow',
components: { components: {
CiIcon, CiIcon,
LoadingIcon,
Popover, Popover,
}, },
props: { props: {
...@@ -46,7 +44,7 @@ export default { ...@@ -46,7 +44,7 @@ export default {
<template> <template>
<div class="report-block-list-issue report-block-list-issue-parent"> <div class="report-block-list-issue report-block-list-issue-parent">
<div class="report-block-list-icon append-right-10 prepend-left-5"> <div class="report-block-list-icon append-right-10 prepend-left-5">
<loading-icon <gl-loading-icon
v-if="statusIcon === 'loading'" v-if="statusIcon === 'loading'"
css-class="report-block-list-loading-icon" css-class="report-block-list-loading-icon"
/> />
......
<script> <script>
import { __, n__, sprintf } from '~/locale'; import { __, n__, sprintf } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
export default { export default {
...@@ -9,7 +8,6 @@ ...@@ -9,7 +8,6 @@
tooltip, tooltip,
}, },
components: { components: {
loadingIcon,
userAvatarImage, userAvatarImage,
}, },
props: { props: {
...@@ -93,7 +91,7 @@ ...@@ -93,7 +91,7 @@
aria-hidden="true" aria-hidden="true"
> >
</i> </i>
<loading-icon <gl-loading-icon
v-if="loading" v-if="loading"
class="js-participants-collapsed-loading-icon" class="js-participants-collapsed-loading-icon"
/> />
...@@ -105,7 +103,7 @@ ...@@ -105,7 +103,7 @@
</span> </span>
</div> </div>
<div class="title hide-collapsed"> <div class="title hide-collapsed">
<loading-icon <gl-loading-icon
v-if="loading" v-if="loading"
:inline="true" :inline="true"
class="js-participants-expanded-loading-icon" class="js-participants-expanded-loading-icon"
......
...@@ -3,7 +3,6 @@ import { __ } from '~/locale'; ...@@ -3,7 +3,6 @@ import { __ } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
const MARK_TEXT = __('Mark todo as done'); const MARK_TEXT = __('Mark todo as done');
const TODO_TEXT = __('Add todo'); const TODO_TEXT = __('Add todo');
...@@ -14,7 +13,6 @@ export default { ...@@ -14,7 +13,6 @@ export default {
}, },
components: { components: {
Icon, Icon,
LoadingIcon,
}, },
props: { props: {
issuableId: { issuableId: {
...@@ -90,7 +88,7 @@ export default { ...@@ -90,7 +88,7 @@ export default {
> >
{{ buttonLabel }} {{ buttonLabel }}
</span> </span>
<loading-icon <gl-loading-icon
v-show="isActionActive" v-show="isActionActive"
:inline="true" :inline="true"
/> />
......
<script> <script>
import ciIcon from '../../vue_shared/components/ci_icon.vue'; import ciIcon from '../../vue_shared/components/ci_icon.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default { export default {
components: { components: {
ciIcon, ciIcon,
loadingIcon,
}, },
props: { props: {
status: { status: {
...@@ -37,7 +35,7 @@ ...@@ -37,7 +35,7 @@
v-if="isLoading" v-if="isLoading"
class="mr-widget-icon" class="mr-widget-icon"
> >
<loading-icon /> <gl-loading-icon />
</div> </div>
<ci-icon <ci-icon
......
<script> <script>
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
...@@ -7,7 +6,6 @@ ...@@ -7,7 +6,6 @@
name: 'MRWidgetAutoMergeFailed', name: 'MRWidgetAutoMergeFailed',
components: { components: {
statusIcon, statusIcon,
loadingIcon,
}, },
props: { props: {
mr: { mr: {
...@@ -44,7 +42,7 @@ ...@@ -44,7 +42,7 @@
class="btn btn-sm btn-default" class="btn btn-sm btn-default"
@click="refreshWidget" @click="refreshWidget"
> >
<loading-icon <gl-loading-icon
v-if="isRefreshing" v-if="isRefreshing"
:inline="true" :inline="true"
/> />
......
<script> <script>
import Flash from '~/flash'; import Flash from '~/flash';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import { s__, __ } from '~/locale'; import { s__, __ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue'; import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
...@@ -15,7 +14,6 @@ ...@@ -15,7 +14,6 @@
}, },
components: { components: {
MrWidgetAuthorTime, MrWidgetAuthorTime,
loadingIcon,
statusIcon, statusIcon,
ClipboardButton, ClipboardButton,
}, },
...@@ -195,7 +193,7 @@ ...@@ -195,7 +193,7 @@
</button> </button>
</p> </p>
<p v-if="shouldShowSourceBranchRemoving"> <p v-if="shouldShowSourceBranchRemoving">
<loading-icon :inline="true" /> <gl-loading-icon :inline="true" />
<span> <span>
{{ s__("mrWidget|The source branch is being removed") }} {{ s__("mrWidget|The source branch is being removed") }}
</span> </span>
......
...@@ -2,14 +2,12 @@ ...@@ -2,14 +2,12 @@
import simplePoll from '../../../lib/utils/simple_poll'; import simplePoll from '../../../lib/utils/simple_poll';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
import Flash from '../../../flash'; import Flash from '../../../flash';
export default { export default {
name: 'MRWidgetRebase', name: 'MRWidgetRebase',
components: { components: {
statusIcon, statusIcon,
loadingIcon,
}, },
props: { props: {
mr: { mr: {
...@@ -115,7 +113,7 @@ js-toggle-container accept-action media space-children" ...@@ -115,7 +113,7 @@ js-toggle-container accept-action media space-children"
class="btn btn-sm btn-reopen btn-success qa-mr-rebase-button" class="btn btn-sm btn-reopen btn-success qa-mr-rebase-button"
@click="rebase" @click="rebase"
> >
<loading-icon v-if="isMakingRequest" /> <gl-loading-icon v-if="isMakingRequest" />
Rebase Rebase
</button> </button>
<span <span
......
<script> <script>
import { __ } from '~/locale'; import { __ } from '~/locale';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
export default { export default {
components: {
LoadingIcon,
},
props: { props: {
isDisabled: { isDisabled: {
type: Boolean, type: Boolean,
...@@ -34,7 +30,7 @@ export default { ...@@ -34,7 +30,7 @@ export default {
data-toggle="dropdown" data-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
> >
<loading-icon <gl-loading-icon
v-show="isLoading" v-show="isLoading"
:inline="true" :inline="true"
/> />
......
<script> <script>
import getIconForFile from './file_icon/file_icon_map'; import getIconForFile from './file_icon/file_icon_map';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import icon from '../../vue_shared/components/icon.vue'; import icon from '../../vue_shared/components/icon.vue';
/* This is a re-usable vue component for rendering a svg sprite /* This is a re-usable vue component for rendering a svg sprite
...@@ -17,7 +16,6 @@ import icon from '../../vue_shared/components/icon.vue'; ...@@ -17,7 +16,6 @@ import icon from '../../vue_shared/components/icon.vue';
*/ */
export default { export default {
components: { components: {
loadingIcon,
icon, icon,
}, },
props: { props: {
...@@ -84,7 +82,7 @@ export default { ...@@ -84,7 +82,7 @@ export default {
:size="size" :size="size"
css-classes="folder-icon" css-classes="folder-icon"
/> />
<loading-icon <gl-loading-icon
v-if="loading" v-if="loading"
:inline="true" :inline="true"
/> />
......
<script> <script>
import CiIconBadge from './ci_badge_link.vue'; import CiIconBadge from './ci_badge_link.vue';
import LoadingIcon from './loading_icon.vue';
import TimeagoTooltip from './time_ago_tooltip.vue'; import TimeagoTooltip from './time_ago_tooltip.vue';
import tooltip from '../directives/tooltip'; import tooltip from '../directives/tooltip';
import UserAvatarImage from './user_avatar/user_avatar_image.vue'; import UserAvatarImage from './user_avatar/user_avatar_image.vue';
...@@ -15,7 +14,6 @@ import UserAvatarImage from './user_avatar/user_avatar_image.vue'; ...@@ -15,7 +14,6 @@ import UserAvatarImage from './user_avatar/user_avatar_image.vue';
export default { export default {
components: { components: {
CiIconBadge, CiIconBadge,
LoadingIcon,
TimeagoTooltip, TimeagoTooltip,
UserAvatarImage, UserAvatarImage,
}, },
......
...@@ -17,12 +17,7 @@ ...@@ -17,12 +17,7 @@
*/ */
import loadingIcon from './loading_icon.vue';
export default { export default {
components: {
loadingIcon,
},
props: { props: {
loading: { loading: {
type: Boolean, type: Boolean,
...@@ -60,7 +55,7 @@ ...@@ -60,7 +55,7 @@
@click="onClick" @click="onClick"
> >
<transition name="fade"> <transition name="fade">
<loading-icon <gl-loading-icon
v-if="loading" v-if="loading"
:inline="true" :inline="true"
:class="{ :class="{
......
<script>
export default {
props: {
label: {
type: String,
required: false,
default: 'Loading',
},
size: {
type: String,
required: false,
default: '1',
},
inline: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
rootElementType() {
return this.inline ? 'span' : 'div';
},
cssClass() {
return `fa-${this.size}x`;
},
},
};
</script>
<template>
<component
:is="rootElementType"
class="loading-container text-center">
<i
:class="cssClass"
:aria-label="label"
class="fa fa-spin fa-spinner"
aria-hidden="true"
>
</i>
</component>
</template>
<script> <script>
import datePicker from '../pikaday.vue'; import datePicker from '../pikaday.vue';
import loadingIcon from '../loading_icon.vue';
import toggleSidebar from './toggle_sidebar.vue'; import toggleSidebar from './toggle_sidebar.vue';
import collapsedCalendarIcon from './collapsed_calendar_icon.vue'; import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
import { dateInWords } from '../../../lib/utils/datetime_utility'; import { dateInWords } from '../../../lib/utils/datetime_utility';
...@@ -10,7 +9,6 @@ ...@@ -10,7 +9,6 @@
components: { components: {
datePicker, datePicker,
toggleSidebar, toggleSidebar,
loadingIcon,
collapsedCalendarIcon, collapsedCalendarIcon,
}, },
props: { props: {
...@@ -112,7 +110,7 @@ ...@@ -112,7 +110,7 @@
/> />
<div class="title"> <div class="title">
{{ label }} {{ label }}
<loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"
:inline="true" :inline="true"
/> />
......
...@@ -3,7 +3,6 @@ import $ from 'jquery'; ...@@ -3,7 +3,6 @@ import $ from 'jquery';
import { __ } from '~/locale'; import { __ } from '~/locale';
import LabelsSelect from '~/labels_select'; import LabelsSelect from '~/labels_select';
import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue'; import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
import LoadingIcon from '../../loading_icon.vue';
import DropdownTitle from './dropdown_title.vue'; import DropdownTitle from './dropdown_title.vue';
import DropdownValue from './dropdown_value.vue'; import DropdownValue from './dropdown_value.vue';
...@@ -16,7 +15,6 @@ import DropdownCreateLabel from './dropdown_create_label.vue'; ...@@ -16,7 +15,6 @@ import DropdownCreateLabel from './dropdown_create_label.vue';
export default { export default {
components: { components: {
LoadingIcon,
DropdownTitle, DropdownTitle,
DropdownValue, DropdownValue,
DropdownValueCollapsed, DropdownValueCollapsed,
...@@ -164,7 +162,7 @@ dropdown-menu-labels dropdown-menu-selectable" ...@@ -164,7 +162,7 @@ dropdown-menu-labels dropdown-menu-selectable"
<dropdown-search-input/> <dropdown-search-input/>
<div class="dropdown-content"></div> <div class="dropdown-content"></div>
<div class="dropdown-loading"> <div class="dropdown-loading">
<loading-icon /> <gl-loading-icon />
</div> </div>
<dropdown-footer <dropdown-footer
v-if="showCreate" v-if="showCreate"
......
<script> <script>
import { s__ } from '../../locale'; import { s__ } from '../../locale';
import icon from './icon.vue'; import icon from './icon.vue';
import loadingIcon from './loading_icon.vue';
const ICON_ON = 'status_success_borderless'; const ICON_ON = 'status_success_borderless';
const ICON_OFF = 'status_failed_borderless'; const ICON_OFF = 'status_failed_borderless';
...@@ -11,7 +10,6 @@ ...@@ -11,7 +10,6 @@
export default { export default {
components: { components: {
icon, icon,
loadingIcon,
}, },
model: { model: {
...@@ -78,7 +76,7 @@ ...@@ -78,7 +76,7 @@
class="project-feature-toggle" class="project-feature-toggle"
@click="toggleFeature" @click="toggleFeature"
> >
<loadingIcon class="loading-icon" /> <gl-loading-icon class="loading-icon" />
<span class="toggle-icon"> <span class="toggle-icon">
<icon <icon
:name="toggleIcon" :name="toggleIcon"
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
}, },
"dependencies": { "dependencies": {
"@gitlab-org/gitlab-svgs": "^1.29.0", "@gitlab-org/gitlab-svgs": "^1.29.0",
"@gitlab-org/gitlab-ui": "^1.2.0", "@gitlab-org/gitlab-ui": "^1.5.0",
"autosize": "^4.0.0", "autosize": "^4.0.0",
"axios": "^0.17.1", "axios": "^0.17.1",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
......
...@@ -62,9 +62,11 @@ describe('File Icon component', () => { ...@@ -62,9 +62,11 @@ describe('File Icon component', () => {
loading: true, loading: true,
}); });
expect( const { classList } = vm.$el.querySelector('i');
vm.$el.querySelector('i').getAttribute('class'), expect(classList.contains('fa')).toEqual(true);
).toEqual('fa fa-spin fa-spinner fa-1x'); expect(classList.contains('fa-spin')).toEqual(true);
expect(classList.contains('fa-spinner')).toEqual(true);
expect(classList.contains('fa-1x')).toEqual(true);
}); });
it('should add a special class and a size class', () => { it('should add a special class and a size class', () => {
......
import Vue from 'vue';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
describe('Loading Icon Component', () => {
let LoadingIconComponent;
beforeEach(() => {
LoadingIconComponent = Vue.extend(loadingIcon);
});
it('should render a spinner font awesome icon', () => {
const component = new LoadingIconComponent().$mount();
expect(
component.$el.querySelector('i').getAttribute('class'),
).toEqual('fa fa-spin fa-spinner fa-1x');
expect(component.$el.tagName).toEqual('DIV');
expect(component.$el.classList).toContain('text-center');
expect(component.$el.classList).toContain('loading-container');
});
it('should render accessibility attributes', () => {
const component = new LoadingIconComponent().$mount();
const icon = component.$el.querySelector('i');
expect(icon.getAttribute('aria-hidden')).toEqual('true');
expect(icon.getAttribute('aria-label')).toEqual('Loading');
});
it('should render the provided label', () => {
const component = new LoadingIconComponent({
propsData: {
label: 'This is a loading icon',
},
}).$mount();
expect(
component.$el.querySelector('i').getAttribute('aria-label'),
).toEqual('This is a loading icon');
});
it('should render the provided size', () => {
const component = new LoadingIconComponent({
propsData: {
size: '2',
},
}).$mount();
expect(
component.$el.querySelector('i').classList.contains('fa-2x'),
).toEqual(true);
});
});
...@@ -82,9 +82,9 @@ ...@@ -82,9 +82,9 @@
version "1.29.0" version "1.29.0"
resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.29.0.tgz#03b65b513f9099bbda6ecf94d673a2952f8c6c70" resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.29.0.tgz#03b65b513f9099bbda6ecf94d673a2952f8c6c70"
"@gitlab-org/gitlab-ui@^1.2.0": "@gitlab-org/gitlab-ui@^1.5.0":
version "1.2.0" version "1.5.0"
resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.2.0.tgz#1d9bf067c2ccf70bcc8e8150644dac475106f3c8" resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.5.0.tgz#320ba164ba8812ff64f94b1cae79a7b749f5bc03"
dependencies: dependencies:
"@gitlab-org/gitlab-svgs" "^1.23.0" "@gitlab-org/gitlab-svgs" "^1.23.0"
bootstrap-vue "^2.0.0-rc.11" bootstrap-vue "^2.0.0-rc.11"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment