The scenario leading to this solution was:
The home page of my application takes almost 30 seconds. Sounds ridicules but during this time, the application makes 6 service calls using 2 services and from 4 different databases loading huge data in the cache and session. So that, any subsequent request will be very fast. That was the initial requirement before I started designing this application.
The login page loads up first. When the user logs in, the home page shows up, but - only after starring at the white browser screen for around 30 painful seconds. So, we needed so show some kind of a UI to the user saying something on the lines of “We’re validating your credentials please wait… thank you for your patience… here’s a flash puzzle you can solve in the mean time… ”.
I found this in action while searching for vacation packages or flights on sites like Orbit or Expedia. Even Microsoft’s Live team showed a little animation game while uploading files to skydrive.live.com. But, my initial google/bing showed no result. Also, none of the following worked:
- Response.Write()
- <body onload=" ....">
- jQuery’s $(document).ready()
Because, any of the above will be fired only after the page lifecycle of the requested page is complete. So we need to skip the page lifecycle. An obvious solution to this problem is use ASP.NET MVC (please!). But since my client had already decided against it, so that was not an option.
Here’s what worked:
Step 1 -
In the Login action’s event handler, after the authentication, redirect the user to an HTML page. This HTML page can have what ever UI you want to show (even a flash animation). While redirecting, pass the home page’s URL of the application as a query string parameter.
protected void LoginButton_Click(object sender, EventArgs e) {
//Assuming that user was authenticated
//Redirect to a temporary HTML page sending the home page URL in query string
string appurl = @"/Home/DashBoard.aspx";
Response.Redirect(@"/HTMLPage1.htm?appUrl=" + appurl);
}
Step 2 –
Create the HTML page with the intended UI. In the body tag’s onload handler of this page retrieve the url from the query string and redirect the user to that url using java script (setting window.location). Here’s the HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our application!</title>
<script type="text/javascript">
function pageLoad() {
var url = location.search.substring(8, location.search.length);
window.location = url;
}
</script>
</head>
<body onload="setTimeout('pageLoad()', 1);">
<div style="background-color: #C1C1C1;text-align:center;">
<h1>
Welcome to our application!</h1>
<br />
<h5>
This is a temporary HTML page we are showing you while we load and set up your dashboard.</h5>
<h5>
It might tale 20-30 seconds.</h5>
<h5>
We thank you for your patience.</h5>
<h3>
If I knew flash or silverlight better <i>(more like at all)</i>, I’d had put some animation here...</h3>
</div>
</body>
</html>
You can download the demo solution here.
