loading spinner added on table load

TblEditorGUI_TAB.php

@@ -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>