in2code-de / powermail_cond

Add conditions (via AJAX) to TYPO3 powermail forms for fields and pages
8 stars 23 forks source link

Flickering of initially hidden fields #93

Open kitzberger opened 2 weeks ago

kitzberger commented 2 weeks ago

Hi,

we've noticed that fields that are initially hidden (by a hide condition) are being displayed for a short time when loading a form in the frontend and are only hidden after the 3132 request has been made and its content processed. This is confusing/irritading to some of our users.

How could this flickering of fields be reduced and the UX be improved?

It should be relatively easy to render the information gathered by ConditionController->buildConditionAction() to the fieldsets/fields markup directly so the initial loading of 3132 could even be skipped and only be performed after the first user input?

I'd like to know whether or not this sounds like a solid approach to you, before digging further into this and start working on a PR.

Patta commented 2 weeks ago

@kitzberger i can confirm this issue. we hide the initial hidden fields with css to avoid this "glitch".

You could insert the css directly into the form with a form field of type html

<style>
.powermail_fieldwrap_initialhiddenfieldmarker,
.powermail_fieldwrap_initialhiddenfield2marker
{
display: none;
}
</style>
kitzberger commented 2 weeks ago

Yup, something like that, but auto-generated. So our editors wouldn't have to think about that. Maybe a simple viewhelper that outputs that CSS?

Patta commented 2 weeks ago

that would be great indeed! (UX)

kitzberger commented 2 weeks ago

And additionally to the display:none we'd have to handle the required attribute of those fields as well... maybe more?

Since there's so much going on in PowermailConditions.js it'll be probably best to not try to re-build its logic serverside.

What about this approach:

That way we don't need to wait for the AJAX-calls response :thinking: (but still have less flickering)

@einpraegsam?