search

azure-ad-b2c / html-templates

66 stars 67 forks source link

UI 'working' spinner is never triggered #5

Open 1619digital opened 2 years ago

1619digital commented 2 years ago

As far as I can tell, there are various actions where the UI is designed to reflect that work is going on in the background. For instance, when you press 'Send verification code' there should be an indication that server-side activity is occurring until the UI is updates with the 'Verify Code' boxes.

This spinner is written into the HTML:

<div class="working" id="email_ver_wait" aria-label="Please wait" aria-hidden="true" role="alert" aria-live="polite" style="display: none;"></div>

If you manually take out the display:none you can see that this is a dot-spinner. It gives an indication of 'activity'.

However, no version of the templates as provided actually allow this to be displayed. When (for instance) the user presses 'Send verification code' there is no indication that anything is going on for a few seconds, which leads to a bad user experience. Clearly the UI should be showing the spinner.

I've tried different versions of unifiedssp and selfasserted templates, none works I believe.

Thank you.

1619digital commented 2 years ago

Digging deeper, this happens because both the showElements function and the switchState function rely on switching elements between display: none and display: inline

The working div (described above), when set to display: inline will never show. It relies on a background-image, and has no content so has an inherent width of zero when set to display: inline.

gaelian commented 9 months ago

Was there ever a resolution to this? As of today, I am seeing what looks to be the same issue with the latest page layout versions.