add a Loading indicator to show fetching data in progress

app/phrases/phrase_edit.php

@@ -507,6 +507,8 @@ if (count($_POST) > 0) {
 	//draggable rows are initially empty
 	echo "<tbody id='structure'>\n";
 	echo "</tbody>";
+	//show loading
+	echo "<tbody id='loading'><tr><td>&nbsp;</td><td><center>Loading...</center></td><td>&nbsp;</td></tr></tbody>\n";
 	//cloning row and buttons created outside of 'structure' table body
 	echo "<tbody>";
 	echo "<tr id='empty_row' style='display: none;'>\n";

app/phrases/resources/javascript/phrase_edit.js

@@ -41,6 +41,14 @@ document.addEventListener("DOMContentLoaded", async function () {
 	add_draggable_rows();
 });
 
+function remove_loading() {
+	//remove loading
+	const loading = document.getElementById('loading');
+	if (loading) {
+		loading.remove();
+	}
+}
+
 async function fetch_data(command) {
     try {
         const response = await fetch('phrase_responder.php', {
@@ -104,6 +112,8 @@ async function add_existing() {
 			select_action.dispatchEvent(changeEvent);
 		}
 	}
+
+	remove_loading();
 }
 
 //