Hi, I’m building site for my company and recently I noticed a “feature” of single page apps. When user clicks a link then unlike regular sites, the browser tab doesn’t get reloaded. Obviously that’s because all routing happens in JS code, however I’ve found it confusing for me and for people I was showing my site to that clicking a link doesn’t give any feedback that click was actually registered and people tend to try clicking again or scroll up and down chaotically;) The longer it takes to show new page the greater confusion it makes.
I came up with some custom “Tracking & Analytics” code which works pretty well for me on desktop but on mobile it’s much worse. The thing is that in my code I instantly show loading bar on top of the page but I didn’t find good way to know when to actually hide it so I call closing loading bar after 2000ms. I was trying to hook to window events like “onpopstate”, “onafterprint”, “onmessage” etc. but no reasonable event seems to be issued after navigation to other page happens.
I’m aware that knowing exact moment of page with all images and JS being loaded might be difficult but pretty much good approximation would be like time of location change + some arbitrary time for rendering.
Please let me know if I’m missing something.
Here’s my site https://www.sunsistema.com with loading bar on top and my code (I used spinner code from https://tobiasahlin.com/spinkit
<div class="spinner-bar" id="spinner-bar">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<style>
.spinner-bar {
visibility: hidden;
margin: 0 auto;
width: 30%;
position: fixed;
top: 0;
left: 35%;
padding-top: 3px;
background-color: #FFC03A;
z-index: 1;
opacity: 0.9;
border-radius: 0 0 20px 20px;
-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.75);
}
.spinner {
width: 70px;
text-align: center;
margin: auto;
}
.spinner > div {
width: 14px;
height: 14px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
</style>
<script type="text/javascript">
window.addEventListener("click", function(event) {
let parent = event.target.parentNode;
while(parent != null && parent.nodeName != "A") {
parent = parent.parentNode;
}
if (parent) {
document.getElementById("spinner-bar").style.visibility = "visible";
setTimeout(function (){
document.getElementById("spinner-bar").style.visibility = "hidden";
}, 2000);
}
}, true);
</script>