Loadericon not being displayed after function has been called before

I have this function to load pages:

`function LoadPage(page) {
var delay = 500;
$(“#loaderIcon”).show();
jQuery.ajax({
url: page,
success:function(data){
setTimeout(function() {
$(“#main-content”).show();
$(“#main-content”).html(data);
$(“#loaderIcon”).hide();
}, delay);
},
error:function (){}
});
}`
When the page is being loaded for the first time, this code gets executed:
`LoadPage(‘dashboard.php’);`

Now when I click on the dashboard button in the menu, it does exactly this again;
`<a href=”#” class=”nav-link active” onclick=”LoadPage(‘dashboard.php’)”>`

However, it only shows the loader the first time the function is getting executed.
It seems as if the settimeout interval does not work the second time, immediately loading the page instead of showing a loader icon for 500 ms.

How can I solve this?

Also in #JavaScript _↴