Wait cursor is not changing until mouse moves

Wait cursor is not changing until mouse moves

Hi,

I have simple code to display the busy cursor while I am waiting for the ajax call to be finished (callback  done) and when the call is finished I restore the cursor to the default value (method always).

I have noticed that if I don’t move the mouse the icon for the mouse does not change. The same happens the other way around – when the call is finished the cursor default icon is not restored until I move the mouse.

Is there something wrong I am doing or this is genuine bug in Chrome (I am using Version 68.0.3440.106 (Official Build) (64-bit)).

Kind Regards,

Janusz

  1. HTML:
  2. $(document).ready(function() {
  3. $('#refresh').on('click', function(event) {
  4. var str = $.param({ "ID": "","Message": ""});
  5. $.ajax({
  6. url: "/log_submit",
  7. type: 'POST',
  8. dataType: 'json',
  9. data: str, 
  10. processData: false
  11. }).done(function(data, textStatus, xhr) {
  12. if (xhr.status == 201) {
  13. UserCtr++;  
  14. }
  15. var logTable = $("#headers");
  16. logTable.html("<th>ID</th><th>Message</th>");
  17. var logs = $("#logTable");
  18. for(var i = 0; i < data.logs.length; i++) {
  19. logs.append("<tr><td>"+data.logs[i][0]+"</td><td>"+data.logs[i][1]+"</td></tr>");
  20. console.log("Item="+data.logs[i][0]);
  21. console.log("Item="+data.logs[i][1]);
  22. }
  23. })
  24. .fail(function(jqXhr, textStatus, errorThrown) {
  25. console.log( errorThrown );
  26. }).always(function(){
  27. $("#getLogsButton, #logsAccordionItemContent p").removeClass('wait');
  28. });
  29. $("#getLogsButton, #logsAccordionItemContent p").addClass('wait');
  30. event.preventDefault();
  31. });
  32. });
  33. css:
  34. .wait            { cursor: wait;}
  35. }
  36. #wait            { cursor: wait;}
  37. }