Modal ajax loading indication.

[undsoft]

Hello,

If I use remote modal dialogs, right now there is no native way for me to inform user that his content is loading. On slow connections this could be frustrating.

I know that there are ways to work around this, but why not have a better solution right out of the box?

For example, you could be adding .modal-loading class to the modal element when content is loading, so that I can style it with css.

modal.js, line 32:

        if (this.options.remote) {
            var that = this;
            this.$element.addClass('modal-loading');
            this.$element.load(this.options.remote, function(){
                that.$element.addClass('modal-loading');
            });
        }

Adding events may also be a nice solution.

[cvrebert]

Given that proposals to emit a loaded event have been rejected in the past, adding a loading event seems unlikely to happen.

[Merg1255]

It is an essential feature though for distributing content into chunks and loading them in the modal. mdo, plz take a look at the loaded event.

[allenp]

As a work around for now I put the "Loading..." message in the placeholder div typically a:

<div id="dialog">Loading. Please wait...</div>

This gets replaced once the content completes loading.

Then you can have a script that resets this loading message once the dialog is closed if your dialog needs to be re-created on each click:

jQuery(function($) {
  $(document.body).on('hidden.bs.modal', '#dialog', function (event) {
    $(this).removeData('bs.modal');
      $(this).html('Loading. Please wait...');
     });
});

[fat]

just went ahead and added the loaded event. you can hook into that if you'd like