Modals Dont Render quickly

1

It seems that if you use a modal to cover a screen, like in the uploaded example in Post Disabling a form, while the app waits for a critical response from the server, you can have problems programmatically removing the modal.

You say really? Yes. Because the modal doesn’t finish rendering for quite some time after you ask to show it. And the same rendering delay happens on hide as well. So if you show, then almost immediately hide, as the server just responded, then the hide gets lost. And you are stuck with the modal and no escape. Or the reverse, the show gets reversed, and the user is pushing more buttons you aren’t ready to handle.

The solution is to trap the rendering completed events for the modal show and hide, and keep track of the current state of the modal, if it’s rendering or not, and what is the next state once the rendering has completed, if any. Here are the Toggle function and event handlers I’m using:

$("#WaitModal").on('shown.bs.modal', function(){
  ModalIsShown = true;
  ModalIsRendering = false;
  ToggleModal(NextModalState);
  });

$("#WaitModal").on('hidden.bs.modal', function(){
  ModalIsShown = false;
  ModalIsRendering = false;
  ToggleModal(NextModalState);
  });

function ToggleModal(ShowModal) {    // ShowModal Boolean: True mean show
  if (ModalIsRendering) {
    NextModalState = ShowModal;
    } else {
    if (ModalIsShown !== ShowModal) {
      if (ShowModal) {
        $('#WaitModal').modal("show");
        ModalIsShown = true;
        } else {
        $('#WaitModal').modal("hide");
        ModalIsShown = false;
        };
      ModalIsRendering = true;
      };
    };
  };
2

There is a mistake in this code. The ToggleModal should always set NextModalState to ShowModal parameter. The first four lines should be:

function ToggleModal(ShowModal) {    // ShowModal Boolean: True mean show
  NextModalState = ShowModal;
  if (! ModalIsRendering) {

The bad code will in most cases remove the modal upon drawing it, as the next mode was not set.

UPDATE WARNING:

For the above to work, you need to disable the close button and the click outside of modal features of the Modal. NOTE: in a later post a better method of removing the close button is shown.

3

It seems this situation has come up again, but in a slightly different way. Back when I was working on this method of blocking user input till I received data from the server, the responses were taking about 1100 to 1300 ms each to respond. I’ve rewritten the server side to use a much cheaper storage (1/200th of the price) and added some parallel processing as well. I got the average response time down to 250 ms. I’m even impressed that I could get AWS to do that.

So the new problem is that the modals take 400 ms to paint and 400 ms to unpaint. That’s 800 ms and 550 ms more than needed. I’m sure the experience would be annoying to the user - of course it is to me, but I expect perfection :slight_smile:

So, is there a way to change, on the fly, the bootstrap painting time? Or can I just style.display = ‘none’ to get rid of it quickly, or should I build my own modal and control it myself?

4

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

To just get rid of the modal no matter what state it is in and re-initialize it: Modal1.modal(‘dispose’);