loading spinner added on table load

This commit is contained in:
Hash Borgir 2023-06-22 18:42:49 -06:00
parent c9c7c63abc
commit 9c4123c148

View File

@ -88,6 +88,9 @@ foreach (glob($tbl . "*.tbl") as $filename) {
<hr>
<div class="tablediv">
<div id="loading-spinner" style="display: none; text-align:center;">
<img src="img/loading.gif" alt="Loading...">
</div>
<table class="table">
<thead>
<tr>
@ -111,6 +114,14 @@ foreach (glob($tbl . "*.tbl") as $filename) {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
function showLoadingSpinner() {
$('#loading-spinner').show();
}
// Hide the loading spinner
function hideLoadingSpinner() {
$('#loading-spinner').hide();
}
$(document).ready(function () {
// Function to resize textarea based on content
function resizeTextarea() {
@ -122,7 +133,7 @@ foreach (glob($tbl . "*.tbl") as $filename) {
$('#tableName').change(function () {
$('.table').DataTable().destroy();
$('.table tbody').html('');
showLoadingSpinner();
var selectedTable = $(this).val();
if (selectedTable !== '') {
@ -130,6 +141,7 @@ foreach (glob($tbl . "*.tbl") as $filename) {
var request = $.get('TblEditor.php', {cmd: 'getTable', tableName: selectedTable});
request.done(function (response) {
hideLoadingSpinner();
// Handle the response here
$('.tablediv tbody').html(response).promise().done(function () {
// Callback function after HTML content is loaded
@ -279,6 +291,8 @@ foreach (glob($tbl . "*.tbl") as $filename) {
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
#loading-spinner {
}
</style>
</body>
</html>