Add throbber between widget page (re)loads

Looks nice. It would be nice to have the same for iFrame display. This change seems to have caused propagation step of the display to become visible, which wasn't visible before AFAIK. Would be great if we could avoid that.

Please also create screenshots/animated gif and embed it to the issue.

Added throbber for iFrame display and hid propagation step of the modal display.

Thanks! We're almost there.

+++ b/js/entity_browser.modal_selection.js
@@ -17,6 +17,6 @@
-  parent.jQuery(parent.document).find('.entity-browser-modal-iframe').parents('.ui-dialog').eq(0).find('.ui-dialog-titlebar-close').click();
+  parent.jQuery(parent.document).find('.entity-browser-modal-iframe').hide().parents('.ui-dialog').eq(0).find('.ui-dialog-titlebar-close').click();

+++ b/src/Plugin/EntityBrowser/Display/Modal.php
@@ -109,6 +109,7 @@ class Modal extends IFrame {
+      '#prefix' => '<div class="ajax-progress-throbber"></div>',
       '#type' => 'html_tag',
       '#tag' => 'iframe',
       '#attributes' => [
@@ -117,7 +118,7 @@ class Modal extends IFrame {

@@ -117,7 +118,7 @@ class Modal extends IFrame {
         'width' => '100%',
         'height' => $this->configuration['height'] - 90,
         'frameborder' => 0,
-        'style' => 'padding:0',
+        'style' => 'padding:0; position:relative; z-index:10002;',

I still see the "Labels:..." text (for a shorter period of time, but anyway).

Would it make sense to move throbber inside last step of EB or at least hide that text with CSS?

Added css for hiding propagation step.

I have checked (tested) this functionality a bit. For modal it looks really good, but for iframe it's not so nice. In case when iframe width is "100%" it looks good, but if width is fixed then throbber is not centered. There is even worst case when iframe is smaller then 50% of container width, then throbber is visible all the time.

I'm not sure is there reason to have fixed iframe width instead of 100%? Because EB with iframe display looks ugly in any case with fixed width.

I can confirm this:

Problem is also with height. When iFrame closes (and height becomes 0 effectively) spinner still floats on top of content.

Fixed height problem from #8. Also, throbber is centered against iframe now.

+ Testing .... We need this.
Thank you.

+++ b/js/entity_browser.iframe.js
@@ -45,12 +45,15 @@
+    $(this).parent().css('width', iframeSettings['width']);

This doesn't solve the problem when width is set in relative value.

e.g. Entity browser is 50% wide. Then we set container's width to 50%, which makes the Entity browser 25%. And as a bonus we didn't even solve the original problem:

What is we set width on throbber instead of the parent container?

I leave width setting for iframe parent container, and set iframe width to 100%. On that way throbber should be centered and for relative values of width. Screenshot is same as throbber.png on #9.

Committed. Thanks!