User input blocked on form/list load

[juuser]

I know you guys/girls are busy atm, but I'm still adding it now, so I won't forget.

Users are complaining that when they open a form or list in front-end and try to make some interaction (e.g. click on the tab or focus on a field) they often get a JavaScript alert "Page is still loading. Please wait a few moments!".

After investing this a bit, I see that there is a blocking script added in F4:
\media\com_fabrik\js\dist\blockuserinput.js

And it's called from:
\components\com_fabrik\fabrik.php for lists and forms.

It is adding an overlay with the click event to "alert function" until the page is fully loaded.

I can sure understand that this is pretty annoying from the UX point of view and the regular users are just wondering like "It wasn't there before, why it's like that now. Updates always screw things up..."

I have disabled this feature and made several tests with multiple forms with different elements and I couldn't create any issues.

Is there any specific reason why this feature was added in front-end for F4? If there is, maybe it's possible to e.g. add the overlay only to action buttons or some other solution depending on what issues was it made to solve.

Thanks!

 

[achartier]

It was added because on slow sites the UI was active before all the elements and such were loaded on the page, and at times a user can do certain things before the page is fully loaded that can cause any number of race conditions (such as submitting a form before all elements were loaded and ending up inserting empty data into the database). I suggest you re-insert the code and let your users know this is a safety feature.

 

[juuser]

@achartier, thank you for the feedback! Meanwhile got some more complaining from a user who needs to enter a bunch of data in a sequence and she says she has to close the "Please wait message" almost every time she starts to fill a new record. And I can replicate that. She has a PC with the specs above average and is sitting on a 1MBit fiber connection, but it is still an issue.

And I can fully understand their complaining as UX is one of the most important things IMHO when it comes to user satisfaction. And regarding the UX, in a simplified words it can come to this at the end of the day:
Good UX - many users
Bad UX - no users

So I will never argue with my users especially when I see the issue is a "step backwards" in way (from users point of view) .

For my sites running F4, I removed the feature for lists and for the form I changed the code to block only actionbuttons, so my users are happy now. For the lists I see no actual danger submitting any empty data, but in theory it might be good to block the list plugin buttons.

Anyway, I have multiple complex F3 sites which have been running for years without a single issue regarding this matter, so I believe blocking plugin and action buttons would make it extra-extra safe for me.

Those are just my personal observations and suggestions.

 

[troester]

Maybe we can remove the alert and show somethink like a semi-transparent background with spinner which will vanish by itself without user action.

And/or some config option?

to block only actionbuttons

How?

 

[juuser]

Maybe we can remove the alert and show somethink like a semi-transparent background with spinner which will vanish by itself without user action.

Actually I though of this myself and even made a small test, but decided that the action button blocking would be more user-friendly. Having a loading spinner with a semi-transparent background would be probably better than the js alert, but it still makes an impression that the site is slow as user will always see the "loading" stuff which was not there in F3.

to block only actionbuttons
How?

I just modified the blockuserinput.js, so the "blockDiv" overlay is attached to "fabrikActions" class instead of the "body".

function onFabrikReady() {
    if (window.jQuery) {
        if (typeof Fabrik === "undefined") {
            if (onFabrikReadyBody === false && jQuery('.fabrikActions').length && jQuery("#blockDiv").length === 0) {
         
                jQuery('.fabrikActions').before(blockDiv);
         
                jQuery("#blockDiv").click(function(e) {
                    return onFabrikReadyBlock(e);
                });
                jQuery("#blockDiv").mousedown(function(e) {
                    return onFabrikReadyBlock(e);
                });
         
            } 
            setTimeout(onFabrikReady, 50);
        } else {
            jQuery("#blockDiv").remove();
        }
    }
}

 

[achartier]

I have made this change and will be in the next release.

 

[juuser]

Excellent, thank you!