corbz/ticket-website
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

Loading animation for filter and searching tickets

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-01-16 11:23:10 +00:00
parent 3cfdee610c
commit 3ef8cd20d0
3 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/static/assets/css/index.css
View File

@ -69118,3 +69118,20 @@ table.dataTable.no-footer {
min-height: 200px; min-height: 200px;
max-height: 200px; max-height: 200px;
} }
#ticketsContainer .loading .spinner-grow {
width: .8rem;
height: .8rem;
}
#ticketsContainer .loading .spinner-grow:nth-child(1) {
animation-delay: 0s;
}
#ticketsContainer .loading .spinner-grow:nth-child(2) {
animation-delay: .9s;
}
#ticketsContainer .loading .spinner-grow:nth-child(3) {
animation-delay: 1.8s;
}

4
apps/static/assets/js/tickets.js
View File

@ -178,7 +178,8 @@ function loadAllTickets() {
} }
$("#ticketsContainer .content").empty(); $("#ticketsContainer .content").empty();
$("#ticketsContainer .none-found, #ticketsContainer .loading").hide(); $("#ticketsContainer .none-found").hide();
$("#ticketsContainer .loading").show();
loadingTickets = true; loadingTickets = true;
// alert(JSON.stringify(filters, null, 4)); // alert(JSON.stringify(filters, null, 4));
@ -193,6 +194,7 @@ function loadAllTickets() {
console.log(JSON.stringify(data, null, 4)) console.log(JSON.stringify(data, null, 4))
$("#ticketCounts .current").text(data.length); $("#ticketCounts .current").text(data.length);
$("#ticketsContainer .loading").hide();
if (data.length === 0) $("#ticketsContainer .none-found").show(); if (data.length === 0) $("#ticketsContainer .none-found").show();
else $("#ticketsContainer .none-found").hide(); else $("#ticketsContainer .none-found").hide();

12
apps/templates/home/tickets.html
View File

@ -171,8 +171,16 @@
<li>Try using the refresh button</li> <li>Try using the refresh button</li>
</ul> </ul>
</div> </div>
<div class="loading"> <div class="loading pos-a top-50 start-50 translate-middle">
Loading <div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow mX-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div> </div>
</div> </div>