Contact form file upload missing ajax throbber

Hi Soundvessel!

Bootstrap 3 by default doesn't shows any progress (I guess it is part of the simplified UI)

Although there's been a solid trend of limiting the Drupal base theme to behave as close as possible to Bootstrap framework, I agree with you that there should be some kind of indicator of the asynchronous upload.

Due to the interest we have of finally releasing the stable D8 version of the base theme, I'm switching the category and priority of this issue to a more appropriate status.

This could very well be an issue that there is no "fullscreen throbber" in Bootstrap at the moment. That (and all the AJAX throbbers) will likely need to be re-evaluated properly, see: http://cgit.drupalcode.org/bootstrap/tree/js/misc/ajax.js

In case anyone else is running into this, one workaround is to remove the js-hide class from the upload button using an appropriate preprocess hook. The button includes a spinner icon while an upload is in progress. I used the code below for the image widget uploader:

function MYTHEME_preprocess_image_widget(&$vars) {
  $vars['data']['upload_button']['#attributes']['class'] = array_diff($vars['data']['upload_button']['#attributes']['class'], ['js-hide']);
}

(assuming that you're working in a sub-theme of Bootstrap)

in a exposed input for a views.
also ajax is working, throbber not showing.
we can NOT see a class name : js-hide
but as follows

<button name="" value="Apply" id="edit-submit-xxx-xxx-views--xxx" type="submit" class="button js-form-submit form-submit btn-info btn" data-drupal-selector="edit-submit-xxx-xxx-views-xxx">Apply</button>

can some one help
thanks.

actually when ajax processing
it is disabled
somehow a little misleading
when ajax finished
disabled is gone and button turns to be normal

remove the js-hide class from the upload button

Ah! Hm, yes... seems the ajax.js logic for appending a throbber needs a little love so it doesn't add it to hidden elements :D

Not sure if this is the same but after working on bootstrap barrio I realised that I was missing the ajax spinner. Looking at other themes such as claro, it seems they require some js and css for this to work:

For bootstrap it seems to be missing the following in theme.js

    /**
    * Theme override of the ajax progress indicator for full screen.
    *
    * @return {string}
    *   The HTML markup for the throbber.
    */
    ajaxProgressIndicatorFullscreen: function () {
      '<div class="ajax-progress ajax-progress-fullscreen spinner-border glyphicon glyphicon-refresh glyphicon-spin" role="status"><span class="visually-hidden">Loading...</span></div>';
    },

Alternatively the same can be implemented in your sub theme using attach: function (context, settings) { e.g.

      /**
      * Theme override of the ajax progress indicator for full screen.
      *
      * @return {string}
      *   The HTML markup for the throbber.
      */
      Drupal.theme.ajaxProgressIndicatorFullscreen = () =>
        '<div class="ajax-progress ajax-progress-fullscreen spinner-border glyphicon glyphicon-refresh glyphicon-spin" role="status"><span class="visually-hidden">Loading...</span></div>';

then in your theme you will need some css. e.g.:

/* Full screen throbber */
.ajax-progress-fullscreen {
  --bs-glyphicon-spin-font-size: 2rem;
  --bs-glyphicon-spin-color: @gray-darker;
  position: fixed;
  z-index: 1261;
  top: 50vh;
  left: 50vw;
  font-size: var(--bs-glyphicon-spin-font-size);
  margin-top: calc(var(--bs-glyphicon-spin-font-size)/-2);
  margin-left: calc(var(--bs-glyphicon-spin-font-size)/-2);
}

This is a modified version of whats in web/core/modules/system/css/components/ajax-progress.module.css

This can also be loaded be adding - core/drupal as a js dependency in your subthemes library.yml file