Customer facing issue while validating in 3G network speed.

[AishwaryaKa]

Having an issue with AEM Forms where elements that are configured to be hidden are still showing up on the page. 

Customer is testing the site on slower network speeds by using Chrome's dev tools to throttle the browser connection to 3G and disabling the cache.  This causes the page to load very slowly (which is expected).  However, when the page finishes loading there are blue and red alert boxes that are displayed when they should be hidden.

When the page is viewed after the slow page load completes, I notice that the alert boxes don't have the "hidden" or "active" classes on their field elements.  Those classes are something AEM adds based on whether the Hide Object option is checked or not in the component configuration.  Since they don't have the classes, they display.  So it seems like there is an AEM event or process that doesn't fire to add the appropriate class on slower connections.

[Pranay_M · Accepted solution]

Hi @AishwaryaKa,

The issue where elements configured to be hidden are still visible when the page loads on slower networks, seems to be related to how AEM applies CSS classes dynamically to form elements during the rendering process. The problem is exacerbated by slower network speeds and disabled browser caching, which can delay or interrupt the execution of client-side scripts responsible for adding the "hidden" or "active" classes.

AEM Forms relies on specific JavaScript events and scripts to apply the "hidden" or "active" classes to form elements based on their configuration. On slower connections, these scripts might not execute in the correct sequence, or their execution might be delayed, leaving the elements in their default (visible) state.

If the "hidden" or "active" classes are not applied due to delayed script execution, the elements will remain visible. This is consistent with your observation that the alert boxes lack these classes after the page finishes loading.

Thanks
Pranay

[AishwaryaKa]

Thankyou Pranay!