1

I have a standard ASP.Net/MVC application, and have what I consider a very important and super-basic (I think) question. A question seeming to have no posted answer (?)

Super-common scenario:
In an HTML page, the user presses some sort of page navigation button. What typically now happens, is the following:

  1. The old page is kept in browser for a 1-2 seconds
  2. The entire browser goes white for 1-2 seconds.
  3. The browser spends X seconds to load new page.

Now, what I consider to a be a super-basic requirement, is that the user gets a wait or progress cursor throughout all the steps 1, 2 and 3. However, I am not able to achieve this, even after tried several hours.

1: When the user navigates (e.g. presses a link or button), it is possible to set up CSS like 

$('*').css('cursor', 'wait !important')

This helps a bit, as a wait cursor is shown approximately through phase (1).

2+3: However, my best shot at setting a wait cursor through phase (2) and (3), is to set a wait cursor in the Document Ready event for the new page. But this only brings up a wait cursor for a very short time at end of phase (3). This really only results in some non-useful short "wait cursor flickering", which really only add confusement to end user.

The ideal situation is perhaps/probably (at least conceptually) the set a wait cursor on the browser application itself at start of phase (1), then restore browser cursor to default at end of phase (3) (e.g. in the Document Ready event).

Please give input! :-) Thousands of people before me must have encountered this(!?)

PS. (Yes, I know that the browser gives a wait symbol in the currently active tab through the page transition, but this wait symbol is far too small / off the focus of the eye of the user. The user needs a clear/visible wait symbol at the exact same place where he clicked the navigation button, i.e. where (s)he has eye focus. Otherwise, many users will think that the web page hangs).

Bjørn Sigurd Benestad Johansen
  • 93
  • 7
  • Take a look here -> https://stackoverflow.com/questions/2821309/changing-the-cursor-in-asp-net did you try any of these already? You basically want to change the cursor on a click then change it back when the page is done loading. This one, though it is closed might have a better answer for you. https://stackoverflow.com/questions/9696521/busy-mouse-cursor-when-page-loading-in-asp-net – Rodger Jan 08 '20 at 22:39
  • Also, if you have some code where you tried and couldn't get it working, that would be a good addition to your question. We can give you specific instructions on what to change then. Your question is too open-ended right now for answers that will specifically align with what you are doing. – Rodger Jan 08 '20 at 22:41
  • Thanks, but these references seems mention what i have already tried. E.g. the code ``` function setHourglass() { document.body.style.cursor = 'wait'; } ``` needs to be called from somewhere. And calling the code from Document Ready is too late. – Bjørn Sigurd Benestad Johansen Jan 08 '20 at 22:43
  • That is why showing what you are trying is important. There are usually a lot of ways to accomplish something. If you are trying something and it isn't working, knowing what you tried and how it failed will help us fix it. Take a look at [how to ask a question](https://stackoverflow.com/help/how-to-ask) I mean I can keep linking different solutions, many of which you may have tried already, but your code is probably 90% of the way there and just requires a minor tweak or two. – Rodger Jan 08 '20 at 22:48
  • Are you sure this is worth the effort? If it provided sufficient value for users, it would likely be implemented directly in popular browsers. – V Maharajh Jan 08 '20 at 23:03
  • No, I am not sure if it is worth the effort. But my background is from Windows Forms, so I am used to giving users a consistent/steady highly visible hourglass as long as "the system is thinking" and the user not is suppose to do anything. But perhaps I just need to accept that the web world is a bit different here. – Bjørn Sigurd Benestad Johansen Jan 09 '20 at 12:25

1 Answers1

1

Personally, I like setting the wait cursor $(window).on('beforeunload', function() {...

So something like this works best for me.

$(window).on('beforeunload', function() {
    $('*').css('cursor', 'wait !important')
});
user12031119
  • 1,228
  • 4
  • 14
  • Thanks, I have already done this. But that code will only bring up a wait cursor through phase (1), i.e. while the old page remains in the browser. As soon as the browser goes white (or starts loading the new page), the wait cursor is gone... – Bjørn Sigurd Benestad Johansen Jan 08 '20 at 22:47
  • @BjørnSigurdBenestadJohansen Perhaps you should also have your wait cursor in both `$(window).on('beforeunload'` and your `$(document).ready` functions. That way it will appear in both phases 1 and 3. – user12031119 Jan 08 '20 at 22:56
  • Yes, Phase 1 will be covered with $(window).on('beforeunload'. – Bjørn Sigurd Benestad Johansen Jan 09 '20 at 08:25
  • But Phase 3 will not be covered by $(document).ready functions, since these seems to be called (as expected) when the document is ready, and this is too late. At this pint in time, there is no longer a need for a wait cursor, since the page is more or less fully loaded. – Bjørn Sigurd Benestad Johansen Jan 09 '20 at 08:31