Use theme function for ajax progress

I created an issue fork and applied the latest patch.
There were one issue with once(), which is now fixed and the entity browser under Gin theme looks fine.

Ajax throbber issue should be fixed, the z-index was wrong, caused by small class name change.

Nice, this fixes the broken throbber in Gin for me.

I am getting error with drupal 10

Uncaught TypeError: $(...).once is not a function

So I changed patch 3 a little.

D10.1.5 and patch #14 works great for me. Thank you akasake.

D10.1.6 and patch #14 working for us. RTCB!

Drupal 10.1.7 and entity_browser 2.9.0 and patch from #14 fixes the issue.

Dave Reid → made their first commit to this issue’s fork.

Tested both usages of the progress throbber and both work as expected. Merging to 8.x-2.x.

Automatically closed - issue fixed for 2 weeks with no activity.

After updating to v2.10 the throbber is rendered when opening the modal, but never removed. This blocks the entire page.

Can you check your browser's JavaScript console for any errors that might have stopped JS from running to remove it?

We have the same problem: Since the update to version 2.10.0, the throbber is added but not removed. This makes sense, since there is no code removing it. In other instances, the throbber is set through `Drupal.Ajax.prototype.setProgressIndicatorThrobber`, where a reference to the element is saved and would later be removed. The entity browser module simply adds the HTML code for the throbber through `Drupal.theme.ajaxProgressThrobber`. This doesn't generate a reference in `this.progress.element`. The entity browser module itself has no code to remove the throbber again, as far as I can see.

Should we open a new ticket for this?

This seems to work in Claro, because `Drupal.behaviors.entityBrowserAddThrobber` is called, but it doesn't go into `if (context === document) {`. In our own theme it does, though, and thus adds a second throbber, after a first one has been added and removed through the proper methiods (briefly, virtually impossible to see withoput debugging).

I see that `Drupal.behaviors.entityBrowserAddThrobber` has just been added in version 2.10.0 (see commit https://git.drupalcode.org/project/entity_browser/-/commit/0a3fdfcf801b8...). I'm just not sure what the IF check is supposed to do and why this works in some themes and not in others.

I can also confirm in my custom admin theme (which is a subtheme of Claro) that the Ajax throbber is not shown when the entity browser is loading up through the modal.

I can confirm in dev tools, that the entity_browser.modal.js file, of this code:

Drupal.behaviors.entityBrowserAddThrobber = {
    attach: function (context) {
      if (context === document) {
        $(window).on({
          'dialog:aftercreate': function (event, dialog, $element, settings) {
            if ($element.find('iframe.entity-browser-modal-iframe').length) {
              $element.append(Drupal.theme('ajaxProgressThrobber'));
            }
          }
        });
      }
    }
  };

That the code inside of the "if (context === document)" conditional does not run.
The breakpoint hits on that line, but does not go inside of that check, which means this code does not run, which is probably why the throbber is missing.

I am interested what needs to happen to fix that, and what happens once the throbber is shown, if I will then run into issues of it being not removed when it should like some people have mentioned.

I confirmed by editing entity_browser.modal.js locally, that by removing the conditional, that the ajax throbber does get shown. Actually, 5 of them got shown, I assume because of the missing context. But still, the throbbers were tiny and added to the bottom of the modal. And lastly, they did not disappear after the entity browser was ready in the modal.

I've tried the #8 🐛 Use theme function for ajax progress Fixed solution to remove the throbber but to no avail.

Can somebody please to explain the rationale behind this throbber or give an advice on how to remove it?