Commit cfe2e6b7 authored by Filipa Lacerda's avatar Filipa Lacerda

Fix loading being shown at the same time at the empty states

parent d34d2718
/* eslint-disable no-new*/
/* global Flash */
import Vue from 'vue';
import PipelinesTableComponent from '../../vue_shared/components/pipelines_table';
import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
......@@ -50,11 +48,11 @@ export default Vue.component('pipelines-table', {
computed: {
shouldRenderErrorState() {
return this.hasError && !this.pageRequest;
return this.hasError && !this.isLoading;
},
shouldRenderEmptyState() {
return !this.state.pipelines.length && !this.pageRequest;
return !this.state.pipelines.length && !this.isLoading;
},
},
......@@ -98,7 +96,6 @@ export default Vue.component('pipelines-table', {
.catch(() => {
this.hasError = true;
this.isLoading = false;
new Flash('An error occurred while fetching the pipelines, please reload the page again.');
});
},
},
......
......@@ -45,7 +45,7 @@ export default {
state: this.store.state,
apiScope: 'all',
pagenum: 1,
pageRequest: false,
isLoading: false,
hasError: false,
};
},
......@@ -61,7 +61,7 @@ export default {
},
shouldRenderErrorState() {
return this.hasError && !this.pageRequest;
return this.hasError && !this.isLoading;
},
/**
......@@ -71,7 +71,7 @@ export default {
* @return {Boolean}
*/
shouldRenderEmptyState() {
return !this.pageRequest &&
return !this.isLoading &&
!this.hasError &&
!this.state.pipelines.length &&
(this.scope === 'all' || this.scope === null);
......@@ -83,7 +83,7 @@ export default {
* @return {Boolean}
*/
shouldRenderNoPipelinesMessage() {
return !this.pageRequest &&
return !this.isLoading &&
!this.hasError &&
!this.state.pipelines.length &&
this.scope !== 'all' &&
......@@ -92,7 +92,7 @@ export default {
shouldRenderTable() {
return !this.hasError &&
!this.pageRequest && this.state.pipelines.length;
!this.isLoading && this.state.pipelines.length;
},
/**
......@@ -101,7 +101,7 @@ export default {
* @return {Boolean}
*/
shouldRenderPagination() {
return !this.pageRequest &&
return !this.isLoading &&
this.state.pipelines.length &&
this.state.pageInfo.total > this.state.pageInfo.perPage;
},
......@@ -157,7 +157,7 @@ export default {
const pageNumber = gl.utils.getParameterByName('page') || this.pagenum;
const scope = gl.utils.getParameterByName('scope') || this.apiScope;
this.pageRequest = true;
this.isLoading = true;
return this.service.getPipelines(scope, pageNumber)
.then(resp => ({
headers: resp.headers,
......@@ -169,11 +169,11 @@ export default {
this.store.storePagination(response.headers);
})
.then(() => {
this.pageRequest = false;
this.isLoading = false;
})
.catch(() => {
this.hasError = true;
this.pageRequest = false;
this.isLoading = false;
});
},
},
......@@ -183,7 +183,7 @@ export default {
<div
class="top-area"
v-if="!pageRequest && !shouldRenderEmptyState">
v-if="!isLoading && !shouldRenderEmptyState">
<navigation-tabs
:scope="scope"
:count="state.count"
......@@ -201,7 +201,7 @@ export default {
<div
class="realtime-loading"
v-if="pageRequest">
v-if="isLoading">
<i
class="fa fa-spinner fa-spin"
aria-hidden="true" />
......
......@@ -34,6 +34,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
setTimeout(() => {
expect(component.$el.querySelector('.empty-state')).toBeDefined();
expect(component.$el.querySelector('.realtime-loading')).toBe(null);
done();
}, 1);
});
......@@ -63,6 +64,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
setTimeout(() => {
expect(component.$el.querySelectorAll('table > tbody > tr').length).toEqual(1);
expect(component.$el.querySelector('.realtime-loading')).toBe(null);
done();
}, 0);
});
......@@ -93,6 +95,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
setTimeout(() => {
expect(component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
expect(component.$el.querySelector('.realtime-loading')).toBe(null);
done();
}, 0);
});
......
......@@ -41,6 +41,7 @@ describe('Pipelines', () => {
setTimeout(() => {
expect(component.$el.querySelector('.table-holder')).toBeDefined();
expect(component.$el.querySelector('.realtime-loading')).toBe(null);
done();
});
});
......@@ -72,6 +73,7 @@ describe('Pipelines', () => {
setTimeout(() => {
expect(component.$el.querySelector('.empty-state')).toBeDefined();
expect(component.$el.querySelector('.realtime-loading')).toBe(null);
done();
});
});
......@@ -104,6 +106,7 @@ describe('Pipelines', () => {
setTimeout(() => {
expect(component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
expect(component.$el.querySelector('.realtime-loading')).toBe(null);
done();
});
});
......
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