My issue was outlined in a recent discussion on Stack Overflow. In essence, my goal is to display a loading indicator before server-side processes complete: [Loader] -> [Target page]. However, the HTML content loads after the server-side tasks, resulting in the loader being displayed after a blank page: [Blank page] -> [Loader] -> [Target page].
I received valuable advice suggesting the use of AJAX. Although I am not very familiar with AJAX, I conducted research and wrote the following code snippets.
Here is a snippet of the HTML code (sample.html),
<body>
<!-- Loading image -->
<div id="loading">
<img id="loading-image" src="/img/loading.gif" alt="Loading..."/>
</div>
<section id="content">
<span th:text="${data_list}"></span>
</section>
<script type="text/javascript">
var $loading = $('#loading').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
$.ajax({
url: "/dataSend",
type:"POST",
}).done(function (fragment) {
});
</script>
</body>
And here is part of the Java code (Controller.java).
@RequestMapping( method = RequestMethod.GET, path = "sample")
String loadSample(Model model) {
return "sample";
}
@RequestMapping(method = RequestMethod.POST, value = "/dataSend")
String sendData(Model model) {
model.addAttribute("data_list", service.getAllData());
return "sample :: #content";
}
Currently, I'm facing a roadblock. If anyone can assist me in resolving the code issue or provide relevant examples, I would greatly appreciate it.