I recently add on my code something like this:
$(window).on('beforeunload', function () {
$('.whirly-loader').show(); //SPINER
})
So anytime the user go to another side of my web the spinner show up. And it works most of the time. But, in some part of the app the client start going another side and the server response with this headers:
Cache-Control
max-age=0, must-revalidate, private
Connection
Keep-Alive
Content-Disposition
attachment;filename=suministro.csv
Content-Type
text/csv; charset=utf-8
[...]
This prevents the reload of the page and only show up the window to ask to download or open the document. My problem is the spinner still show up even if the page stop load
Which should be the event to hide my spinner even if the page don't reload because of the headers?
;(function($, window, document){
$.fn.plgn = function() {
//Start the loader when the event beforeunload
$(window).on('beforeunload', function(event){
event.stopPropagation();
console.log("whirly-loader show");
//Hide the loader after 5 seconds if the page fails to load
setTimeout(function(){
console.log("whirly-loader hide");
}, 5000);
});
}
})(jQuery, window, document);
//Start the loader as soon as javascript loads
console.log("whirly-loader show");
$( document ).ready(function() {
//Hide the loader when the page is completely loaded
console.log("whirly-loader hide");
$("body").plgn();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value = "Refresh page" onclick="window.location.reload();" />We had a similar problem and came to the solution to do magic (in your case, show a spinner) manually, like:
$('.js-show-spinner').addEventListener('click', event => {
event.preventDefault();
$('.whirly-loader').show(); //SPINER
});<a href="https://google.com">google.com</a>
<a class="js-show-spinner" href="/home">Home</a>
<a href="SOME_DOC" download>some doc</a>You can add attribute target for download links.
Example:
<body onbeforeunload="document.body.style.backgroundColor = 'red';">
<a href="output.zip" target="_blank">Download</a>
</body>
Attribute target="_blank" will cause, that onbeforeload event will not fire.