Change button state before event process

[hitaishi19]

Description

Save button does not show loading state when clicking on it. Instead it remains still for sometime and then shows loading state. This is due to event being fully processed before setting the loading class and disabling the button.

Manual testing steps

Issues

• Save button loading state is missing #1865

Pull request checklist

• The target branch is correct
  • See picking the right version
• All commits are relevant to the purpose of the PR (e.g. no debug statements, unrelated refactoring, or arbitrary linting)
  • Small amounts of additional linting are usually okay, but if it makes it hard to concentrate on the relevant changes, ask for the unrelated changes to be reverted, and submitted as a separate PR.
• The commit messages follow our commit message guidelines
• The PR follows our contribution guidelines
• Code changes follow our coding conventions
• This change is covered with tests (or tests aren't necessary for this change)
• Any relevant User Help/Developer documentation is updated; for impactful changes, information is added to the changelog for the intended release
• CI is green

[GuySartorelli]

I've added the pull request template back into the PR description. Can you please fill it in, including ticking all of the checkboxes that apply? This will help you identify things that need to be done before this is ready to be reviewed (for example build the dist javascript).

Please also retarget this PR to the 2.3 branch so that it can be included as a patch release rather than waiting for the next minor release.
You may need to reset your commits after retargetting the PR.

I have also tested this locally and found two problems:

1. Instead of swapping to the "loading" appearance, the button goes completely blank:
   
   It only uses the full loading styling after the beforesubmitform stuff has finished.
   An easy way to test this is to add a sleep(5) into the validate() method of an elemental block, then make sure to edit the block before hitting save.
2. If an elemental block has a validation error, the button stays disabled forever.

[GuySartorelli]

To fix 1, probably you need to move everything in the if($(button).is('button')) { conditional block.

To fix 2, I suspect the clearButton() function needs to be called in the if (!success) { conditional block just before it returns false.

[GuySartorelli]

Problem 2 from #1866 (review) is still happening. Did you test that scenario?

[hitaishi19]

Problem 2 from #1866 (review) is still happening. Did you test that scenario?

This is not reproducing to me, can you please share the reproduction steps?

[GuySartorelli]

1. Create a block
2. Add some validation to an elemental block which will fail

   public function validate()
   {
       $result = parent::validate();
       $result->addFieldError('Title', 'FAILURE');
       return $result;
   }

3. Make a change to the block (or else validation won't trigger)
4. Click "save" on the page.

[GuySartorelli]

LGTM, works well locally. Thanks for taking the time to implement this fix.