Slow network connection causes components to not obey Hide Object configuration

[dpkhmhs]

AEM 6.5, SPA, Angular 9, Bootstrap 4

AEM Forms packages:

adobe-aemfd-linux-pkg-6.0.1120.zip

adobe-aemfd-compat-pkg-2.0.48.zip

Having an issue with AEM Forms where elements that are configured to be hidden are still showing up on the page (submission-status-issue.png).  I've been testing our 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 I view the html after the slow page load completes, I notice that the alert boxes don't have the "hidden" or "active" classes on their field elements. I believe those classes are something AEM adds based on whether the Hide Object option is checked or not in the component configuration (submission-status-config.png). 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.

How can I fix this?

[rismehta]

@dpkhmhs

This issue typically occurs due to slow form rendering, often caused by a large number of form elements or complex custom business rules. Could you please provide answers to the following questions:

• How many form objects are there in total (i.e., components dropped during authoring)?
• Are there many custom business rules running during form initialization? For example, is there a network call being made during initialization that is taking up significant time?

[dpkhmhs]

This is just on the form.  The form is embedded into an authored page via the SPA editor.

• 5 Adaptive Form Fragments
• 12 form objects
• 5 form objects with custom javascript rules

No network calls being made by any of the form objects, but the page does have to download the Angular and SPA code.

[dpkhmhs · Accepted solution]

See answer on this question:

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