echosystem.fr
/
active-forks
mirror of https://github.com/techgaun/active-forks.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Show spinner while loading

This commit is contained in:
Saugat Acharya 2017-06-16 02:16:26 +05:45
parent cf3e1b9078
commit 05088b291b
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -41,11 +41,7 @@
<input id="q" name="q" class="form-control" type="text" placeholder="techgaun/github-dorks">
<span class="input-group-btn">
<button id="find" onClick="fetchData()" type="button" class="btn btn-primary">
<div id="spinner" hidden>
<i class="fa fa-spinner fa-pulse fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
Find
<i id="spinner" class="fa fa-spinner fa-pulse fa-fw"></i> Find
</button>
</span>
</div>

16
js/main.js
View File

@ -25,9 +25,17 @@ function fetchData() {
}
function fetchAndShow(repo) {
document.getElementById('find').disabled = true;
document.getElementById('spinner').removeAttribute('hidden');
fetch(`https://api.github.com/repos/${repo}/forks?sort=stargazers`)
.then((response) => response.json())
.then((data) => showData(data));
.then((data) => {
showData(data);
document.getElementById('find').disabled = false;
document.getElementById('spinner').setAttribute('hidden', 'hidden');
});
}
function showMsg(msg, type) {
@ -37,6 +45,8 @@ function showMsg(msg, type) {
alert_type = 'alert-danger';
}
document.getElementById('footer').innerHTML = '';
document.getElementById('data-body').innerHTML = `
<div class="alert ${alert_type} alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
@ -83,8 +93,8 @@ function showData(data) {
}
document.getElementById('data-body').innerHTML = `
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover rounded">
<div class="table-responsive rounded">
<table class="table table-striped table-bordered table-hover">
${thead}
<tbody>${html.join('')}</tbody>
</table>