How to hide the picture after filling in the table?

Help please, how to run this: while filling in the table, the picture is seen, and once the table is populated, immediately disappeared?
I.e., initially, the no, by pressing the button, it appears and is displayed until filled table.

Code
var linkApi = Vue.resource('/link')

Vue.component('link-form', {
 props: ['links'],
 data: function() {
 return {
 text: ",
 preloaderVisibility: false
}
},
template:
 '<div>' +
 '<div><h3>Analyzing page</h3></div>' +
 '<div><input id="edit"style="width: 100%" type="text" placeholder="Write a link of the" v-model="text"/></div>' +
 '<div class="center"><button style="width:200px;" title="Analyze" @click="analyze">Analyze</button></div>' +
 '<div v-if="preloaderVisibility" id="image" class="center"><img style="width:200px;" src="/img/wait.gif"></div>' +
'</div>',
 methods: {
 analyze: function() {
 var url = {url: document.querySelector('#edit').value};
 var temp = "https?:\/\/[a-z0-9\-\.]+\.[a-z]{2,9}";
 var regex = new RegExp(temp);
 if (!regex.test(document.querySelector('#edit').value) || url.url.length==0) {
 alert("Incorrect url!")
 return false;
}

this.links.splice(0);
 this.preloaderVisibility = true;
 linkApi.save({}, url).then(result =>
 result.json().then(data => {
 data.forEach(link => this.links.push(link))
})
)
 this.text = ";
}
}
});

Vue.component('link-row', {
 props: ['link'],
 template: '<tr>' +
 '<td>{{link.id}}</td>' +
 '<td>{{link.name}}</td>' +
 '<td onclick="document.querySelector(\'#edit\').value = this.textContent" style="cursor: pointer">{{link.url}}</td>' +
'</tr>'
});

Vue.component('links-list', {
 props: ['links'],
 template: '<table>' +
 '<thead>' +
 '<th colspan="3">Found links</th>' +
 '</thead>' +
 '<thead>' +
 '<th>ID</th>' +
 '<th>Name</th>' +
 '<th>URL</th>' +
 '</thead>' +
 '<tbody>' +
 '<tr is="link-row" v-for="link in links" :key="link.id" :link="link"></tr>' +
 '</tbody>' +
'</table>'
});

var app = new Vue({
 el: '#app',
 template: '<div><link-form :links="links" />' +
 '<links-list :links="links"/>' +
 '<links-clear :links="links"/>' +
'</div>',
 data: {
 links: []
}
});

March 19th 20 at 08:47
2 answers
March 19th 20 at 08:49
Solution
There you have is responsible for the appearance of images, preloaderVisibility? Well, that and set it to false upon receipt of the data. This is after data.forEach(link => this.links.push(link))if I understand correctly.
March 19th 20 at 08:51
<img v-show="isLoading" src='somepath' >

Find more questions by tags Vue.jsJavaScript