TWebWaitMessage animation?

WEB TMS WEB Core
9

Indeed it is. Seems there are some variances in how browsers deal with these things. How unfortunate!

If you're interested in an alternative - using a spinning icon - this seems to work equally well in FireFox and Chrome, bypassing whatever is blocking the animated gif.

In this approach, an extra icon is tacked onto the button text to indicate that something is going on. Font Awesome is used in this case, so the "fa-spin" class can be added to any icon to get it to spin. Removing the "fa-spin" class of course generates a non-spinning icon. There are other classes as well as CSS that can be added to adjust the size, speed, direction, and so on, of the icon, spinning or otherwise. Here, a "spinner" icon is used.

procedure TForm1.WebButton1Click(Sender: TObject);
var
  i: Integer;
  d: double;
begin
  WebButton1.Tag := WebButton1.Tag + 1;
  WebButton1.Caption := IntToStr(WebButton1.Tag)+' Clicks - Wait - <i class="fa-solid fa-spinner fa-spin"></>';

//  WebWaitMessage1.Show;

  asm await sleep(3000); end;

  // busy work - takes only a couple of seconds
  d := 1;
  for i := 1 to 500000000 do
   d := d + sqrt(i*d)*sqrt(i*2*d)+sqrt(i*3*d)*sqrt(i*4*d);

  WebButton1.Caption := IntToStr(WebButton1.Tag)+' Clicks - Ready - <i class="fa-solid fa-check"></i>';

//  WebWaitMessage1.Hide;
end;

If you've not got Font Awesome in your project, you can use the Manage JavaScript Libraries for this, or just add a couple of lines to your Project1.html file. This uses Font Awesome 6 Free, but similar support has been available for prior versions as well. No doubt other font libraries support similar mechanisms.

    <!-- Font Awesome 6 Free -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css" integrity="sha256-Z1K5uhUaJXA7Ll0XrZ/0JhX4lAtZFpT6jkKrEDT0drU=" crossorigin="anonymous">

There are other little things that stop working under heavy load. For example, in the above, there is a 3000ms wait before the heavy CPU stuff. During that period, mouseovers will change the color of the button. But once the heavy CPU stuff starts, the icon is still spinning, but no mouseover changes.

This is also why it is good to throw up a page-covering blocking like what WebWaitMessage does, so that other interactions are not possible. Maybe doing that but using the animating font instead of the animating GIF is what is needed.

progress

1 Like