CMS 4.12: btn-loading icon is broken in admin 1.12

[lekoala]

Affected version : 4.12

since the upgrade, the animated icon is not fully displayed (you see only the first two dots, tested on chrome, windows)

from what i can see, it changed from

<div class="btn__loading-icon">
    <span class="btn__circle btn__circle--1"></span>
    <span class="btn__circle btn__circle--2"></span>
    <span class="btn__circle btn__circle--3"></span>
</div>

to

<div class="btn__loading-icon">
    <span class="btn__circle btn__circle--1">
        <span class="btn__circle btn__circle--2">
            <span class="btn__circle btn__circle--3"></span>
        </span>
    </span>
</div>

the spans are nested instead of being siblings

Pull Requests

• FIX Correctly close spans for btn loading icon #1431

[GuySartorelli]

This is added through one of two places:

• client/src/components/FormAction/FormAction.js: getLoadingIcon()
• client/src/legacy/LefAndMain.js: submitForm()

In both cases, the markup being added looks like this:

<div className="btn__loading-icon" >
  <span className="btn__circle btn__circle--1" />
  <span className="btn__circle btn__circle--2" />
  <span className="btn__circle btn__circle--3" />
</div>

My first guess is that the more recent version of jQuery doesn't expect self-closing span tags maybe? So it's possible changing it to <span ... ></span> will resolve this - but I haven't tested that at all (or even verified that I can reproduce this)

Update: That solves it. I'll create a PR. I'll only change the entwine part - having these be self-closing is correct for react syntax.

[lekoala]

@GuySartorelli yes i can confirm it works. jquery 3.5 introduced some changes for self closing tags so that's probably why.

[GuySartorelli]

Merged - fix released as 1.12.2