When you click a menu, link or a button that will take your user to another page, you would want them to know something is happening. Instead of a frozen or blank screen, you want them to see a friendly loading animation or message. Something like this:
The problem is that when moving from one page to the other, the first page gets unloaded from the browser, so you can no longer execute code in it, and some time will inevitably pass until meaningful content comes back to the browser from the second page.
SPAs and some web technologies have it easier (e.g., they only load content, and/or pre-loading is possible). In WebForms, such goodies don't exist and you need to take some measures to alleviate the jarring transition as much as possible. One approach to doing that is:
- Hook to the earliest client-side event that you know will navigate the user away from the page. In the sample below, the click on a menu and the click on a hyperlink are used.
- Show a loading sign immediately, before the current page starts unloading. In the sample, a modal RadAjaxLoadingPanel is shown.
- On the page that will get loaded (or, on all pages), make sure that the first bytes that arrive are the simplest possible CSS+HTML+JavaScript combination that can provide the same loading panel appearance as the one you use when unloading a page. The sample below shows one way to mimic the RadAjaxLoadingPanel appearance.
- Hook up the appropriate client-side events that indicate the page is now usable so you can hide the loading sign. In WebForms, that's Sys.Application.Load. The sample also adds a handler for window.onerror to capture issues and attempt to salvage some usability for the user in case things go south.
Comments in the code offer more detailed explanations.
Troubleshooting
This sample uses a fake performance hit to simulate long document parsing. It may block the UI thread on your end and thus - also block the image. If this happens and you don't see the image, try the code in a real page instead.
You can also throttle the network speed through the dev toolbar to increase the time it takes for the content to load so you have time to see the loading sign and to mimic a real connection lag.