Having a standard ASP.Net/MVC application, I am faced with what seems like a fundamental question that has no clear solution.
Common situation:
When a user navigates through an HTML page by pressing a button, the following typically occurs:
- The old page remains in the browser for 1-2 seconds.
- The entire browser window turns white for 1-2 seconds.
- The browser takes X seconds to load the new page.
My basic requirement is to ensure that the user sees a wait or progress cursor throughout all these steps. Despite spending hours trying, I have been unable to achieve this.
1: It is possible to use CSS to set a wait cursor when the user navigates (e.g. by pressing a link or button) like:
$('*').css('cursor', 'wait !important')This works somewhat during phase (1).
2+3: However, my attempts to set a wait cursor during phases (2) and (3) have only resulted in a brief flicker at the end of phase (3), which is not helpful for the user.
The ideal scenario would be to set a wait cursor on the browser itself at the beginning of phase (1) and switch back to the default cursor at the end of phase (3) (e.g. in the Document Ready event).
I welcome any input! Many others must have encountered this issue before!
PS. While the browser provides a small wait symbol in the active tab during page transitions, it may not be prominent enough for users. They need a visible wait symbol exactly where they clicked the navigation button to avoid confusion. Otherwise, users might think the webpage is unresponsive.