Note: This post discusses “A New Dawn”, my WordPress theme. More detail on the theme implementation is available here.

In a previous post I discussed the derivation of some of the requirements for the Loading Screen, and now, in this and the next few posts, I will talk about how I satisfied these requirements in my implementation of the feature.

To satisfy this requirement, I decided to give the loading screen a close button. This addresses the user’s feeling of disempowerment, discussed during the previous post, in slow-loading conditions if they do not want to wait for the page to finish loading before, say, navigating away from it.

However, under normal conditions if the user is too quick to click the close button, then the screen gets dismissed too early, leading to the experience double-whammy of having an imposing loading screen in the way and seeing the ugly artifacts of sequential rendering getting displayed – the worst of both worlds!

Therefore, my implementation features a close button timeout period after which the close button appears. This means that in slow-loading conditions the user has an “out”, but under normal conditions the screen should appropriately mask the screen-rendering artifacts as intended, until such time as it is automatically dismissed. The length of the timeout is a code-configurable option of the LoadingScreen class, so if this feature is not desired by the client site the timeout can be set to 0 seconds for the close button to be always visible. The default timeout period is 3 seconds.

The timeout implementation uses the StopWatch class, a very simple class that you kick off using the start() method, and thereafter can retrieve the number of seconds elapsed using the secondsElapsed() method. By using the system clock (accessed with Date.getTime()) the timeout is guaranteed to still fire even if the page is loading slowly regardless of whether it is caused by a slow network or a slow processor. As long as any timeout event created by the startPolling() method of the LoadingScreen class can be processed, the button will appear after the timeout period.

There of course is still the danger of malfunction here. What happens, for example, if setTimeout() fails to create a timeout event, due to browser incompatibility or another reason? Or if the browser does not properly implement the styles that both hide and show the button? In such a case, it’s possible that not only will the close button fail to appear, but the loading screen will never get dismissed and will render your whole site completely unuseable! This is a real concern, and one that I will address in a future post.