Loading Screen: Close Button

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.

Requirement #1: There must be a way to manually dismiss the loading screen if the page is taking a long time to load, or if the automatic dismissal mechanism fails.

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.

The Devil In The Details

Because this site is about the art and science of Software Development, it’s not enough for me to just publish the fruits of my labours without analyzing every little implementation detail to a disturbing degree.

So with that goal in mind, here are some of the technical artifacts from my development of “A New Dawn”, my WordPress theme, for those among you with an inclination to explore such things.

The two main modules I created while making this theme were The Loading Screen module itself and The CSS Notification module, a cross-browser module for invoking a javascript callback when a linked CSS file has finished loading. A cleaner source listing for both files is available under the HTML documentation link below. These source files constitute part of the code for the theme and can be re-used or extended in other contexts by themselves.

Artifact Loading Screen CSS Notification
API Documentation (YUIDoc)
Notes from Test-Driven Development (FreeMind)
Test Harness (QUnit)
Unit test listings
Changelist descriptions (Mercurial)