Ajax progress indicator on action buttons
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3487490. --> Reported by: [artis.bajars](https://www.drupal.org/user/320715) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>With the introduction of <a href="https://www.drupal.org/project/gin/issues/3463796">#3463796 Ensure sticky action buttons to work with modals and ajax refresh-calls</a> and entity form action buttons becoming <code>&lt;label&gt;</code> elements there is no longer a visible progress indicator when an ajax callback is attached to an action button. Is there a way to restore this functionality?</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <p>- Install gin 8.x-3.0-rc14, set as admin theme<br> - Attach an ajax callback to e.g. the node form "Preview" button<br> - Observe that no progress indicator is visible:</p> <div class="codeblock"> <pre><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br></span><span style="color: #FF8000">/**<br>&nbsp;* Implements hook_form_FORM_ID_alter().<br>&nbsp;*/<br></span><span style="color: #007700">function </span><span style="color: #0000BB">ajax_example_form_node_form_alter</span><span style="color: #007700">(&amp;</span><span style="color: #0000BB">$form</span><span style="color: #007700">, </span><span style="color: #0000BB">FormStateInterface $form_state</span><span style="color: #007700">) {<br>&nbsp; </span><span style="color: #0000BB">$form</span><span style="color: #007700">[</span><span style="color: #DD0000">'actions'</span><span style="color: #007700">][</span><span style="color: #DD0000">'preview'</span><span style="color: #007700">][</span><span style="color: #DD0000">'#ajax'</span><span style="color: #007700">] = [<br>&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'callback' </span><span style="color: #007700">=&gt; </span><span style="color: #DD0000">'ajax_example_form_node_form_preview_callback'</span><span style="color: #007700">,<br>&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'event' </span><span style="color: #007700">=&gt; </span><span style="color: #DD0000">'click'</span><span style="color: #007700">,<br>&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'progress' </span><span style="color: #007700">=&gt; [<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'type' </span><span style="color: #007700">=&gt; </span><span style="color: #DD0000">'throbber'</span><span style="color: #007700">,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'message' </span><span style="color: #007700">=&gt; </span><span style="color: #DD0000">'Processing...'</span><span style="color: #007700">,<br>&nbsp;&nbsp;&nbsp; ],<br>&nbsp; ];<br>}<br><br></span><span style="color: #FF8000">/**<br>&nbsp;* Form submission handler for the 'preview' action.<br>&nbsp;*<br>&nbsp;* @param array $form<br>&nbsp;*&nbsp;&nbsp; An associative array containing the structure of the form.<br>&nbsp;* @param \Drupal\Core\Form\FormStateInterface $form_state<br>&nbsp;*&nbsp;&nbsp; The current state of the form.<br>&nbsp;*/<br></span><span style="color: #007700">function </span><span style="color: #0000BB">ajax_example_form_node_form_preview_callback</span><span style="color: #007700">(array </span><span style="color: #0000BB">$form</span><span style="color: #007700">, </span><span style="color: #0000BB">FormStateInterface $form_state</span><span style="color: #007700">) {<br>&nbsp; </span><span style="color: #0000BB">$response </span><span style="color: #007700">= new </span><span style="color: #0000BB">AjaxResponse</span><span style="color: #007700">();<br>&nbsp; </span><span style="color: #0000BB">$response</span><span style="color: #007700">-&gt;</span><span style="color: #0000BB">addCommand</span><span style="color: #007700">(new </span><span style="color: #0000BB">AlertCommand</span><span style="color: #007700">(</span><span style="color: #DD0000">'Do you see this?'</span><span style="color: #007700">));<br>&nbsp; return </span><span style="color: #0000BB">$response</span><span style="color: #007700">;<br>}<br></span><span style="color: #0000BB">?&gt;</span></span></pre></div>
issue