Display Loading Screen while Rendering Large HTML Tables

Here is a problem I’ve been having for a while now: large HTML tables take way to long to render, especially under IE. Why do you use tables, you ask? To display large amounts of data on the screen – usually in a sortable format using the Table Sorter plugin. It works out pretty nicely – once the table renders completely, and the sorting script kicks in, you have a very nice table on the screen that can be sorted in a fraction of a second and broken into multiple pages as needed. Since all the processing is done locally it is usually very fast.

The problem is that it usually takes the browser few seconds to load these large tables. Firefox usually starts rendering the table as it loads, so users can at least see the first few dozen rows right away. Unfortunately, the sorting script runs after the whole thing loads so clicking on the column names does nothing. IE is even worse – stalls until all of the HTML is loaded. I’ve been observing users dealing with these huge report pages that take a long time to load and they always get frustrated. They start clicking things, see no response and get annoyed. I’ve even seen people close the window and try again repeatedly – and would never wait the 5-10 seconds for it to load.

On the other hand, somewhere else there is a script that loads content asynchronously via AJAX call. Inside of the div where the dynamic content is loaded, I placed one of those spinning gif images accompanied by “Loading… Please Wait” message. Surprisingly, that script sometimes wouldn’t fire properly due to an internal bug – but people would still sit patiently watching the spinner for up to a minute or longer. Some would just minimize the window and continue doing other things and would check it every few minutes to see if it was done.

The lesson here is that loading screens are magical. I definitely needed one for all the stupid pages with the large tables. The only problem was – how do I display a loading screen that will disappear soon as the page is loaded. I tested several ideas and I found out that it is usually easiest to put some sort of overlay on the page. Something like this:

 
      

        
        Loading ... ... Please wait!
      

This one actually covers the whole page. You would usually want to tailor yours so that it leaves the navigational elements (sidebar, menus, etc) intact and only covers the loading table. You place this somewhere on your page, and it covers the partially rendered content with a user pacifying spinning animation. Then just go to where you load your table sorter and other jQuery crap and add this as the last line

$(document).ready(function() 
	{
		$("#loadpage").hide();
	});

That’s it. Just hide the div – no additional logic is needed here. Because of the way most browsers render content and run Javascript this command will not be triggered until your HTML table is loaded and good to go. Since I’ve put this simple trick into place, users actually commented that the large reports seem to load faster. They are not – they take the same exact amount of time to load, but it seems faster because now they see a nice little message and a spinner instead of just dealing with partially rendered content. This works pretty well in IE which tends to stall and become unresponsive when working on especially large tables – when users see this message they usually back of, and let the damn thing load.

I wish I had known this trick earlier. It would save my users much frustration.