Component Touch UI dialog delay during loading.

[antoname8]

Hello,

I have an AEM component. Touch UI dialog of this component consists of about 75 fields. These fields are split on 4 tabs. There are show/hide dependencies between fields. I'm trying to edit component and open the dialog, when dialog window is loaded it starts showing all fields and after 1 sec show/hide functionality applied and all fields which must be hidden - they are hidden only after 1 sec. So that authors can see delay during show/hide functionalities. One important thing: this is issue is reproducible from time to time. There is a period when the delay is not reproduciable and I can't see fields which must be hidden during dialog loading.
I'm not sure from what it depends at all. My guesses that it depends on browser performance maybe and memory?

Any thoughts why I experience this delay from time to time? So It's not only about me, the same for my team.

Many thanks!

[raf-winterpacht]

Maybe it's possible to only show/hide on initial load for the default (1st) tab. But 75 fields sounds like a lot...any better way to split those up? Separate components? 

[antoname8]

Hello @raf-winterpacht 

If I understand you correctly. In my case 75 fields are split up between 4 tabs, 15-20 fields per tab. And on initial load the issue is reproduced only for first default tab. Unfortunately It's not possible to separate components in that case. 

[h_kataria]

I think it should be the other way i.e fields should be hidden initially and when the show/hide logic kicks in the fields should become visible. You can add the hide class to those fields so they are hidden initially. And regarding the inconsistency, it could be due to different factors depending on how you have implemented the show/hide logic. If you have a multi tenant solution, and each solution implemented its own show/hide logic, it is also possible they might be creating conflict.

[antoname8]

Hello @h_kataria 

I added the hide class to those fields so they are hidden initially, but when authors will turn switch field on, hidden fields will be shown with the same delay ~1 sec, so there is a vise verse effect with showing fields.

What do you mean by tenant solution?

Many thanks! 

[h_kataria]

By multi tenant solution, I meant multiple solutions deployed on the same AEM instance. But as I mentioned earlier, there could be different reasons for inconsistency depending on how show/hide logic is implemented.
And if you are using acs commons then you can utilize their show/hide feature https://adobe-consulting-services.github.io/acs-aem-commons/features/ui-widgets/show-hide-widgets/in... 
Hope that helps.

[HrishikeshKa · Accepted solution]

Hi @antoname8 ,

The delay you are experiencing in the Touch UI dialog loading and show/hide functionality could be influenced by several factors. Here are a few possible reasons for the intermittent delay:

1. Browser Performance: The performance of the browser you are using can impact the rendering and execution speed of JavaScript code, which is responsible for the show/hide functionality. If the browser is busy with other tasks or has limited resources, it may cause a delay in executing the show/hide logic.

2. Network Latency: The speed and stability of your network connection can affect the loading time of the Touch UI dialog. If there are network issues or high latency, it can result in delays in fetching and rendering the dialog components.

3. Server Load: The performance of the AEM server can also impact the loading time of the Touch UI dialog. If the server is under heavy load or experiencing high traffic, it may take longer to process and deliver the dialog content to the browser.

4. Caching: If there are caching mechanisms in place, such as browser caching or CDN caching, it can affect the loading time of the dialog. If the cached version of the dialog is served, it may not reflect the latest show/hide logic, resulting in a delay when the updated logic is applied.

To troubleshoot and mitigate the delay, you can consider the following steps:

1. Optimize the show/hide logic: Review the JavaScript code responsible for the show/hide functionality and ensure it is efficient and optimized. Avoid unnecessary DOM manipulations and consider using debounce or throttle techniques to optimize the execution.

2. Test on different browsers: Verify if the delay is consistent across different browsers. If the delay is specific to a particular browser, it could indicate browser-specific performance issues.

3. Monitor server performance: Keep an eye on the server performance metrics, such as CPU usage, memory utilization, and response times. If the server is consistently under heavy load, it may require optimization or scaling.

4. Network analysis: Use network analysis tools to identify any network-related issues, such as high latency or packet loss. This can help identify potential bottlenecks in the network infrastructure.

5. Clear cache: If caching is enabled, try clearing the browser cache or disabling caching temporarily to ensure the latest version of the dialog is loaded.

If the issue persists and significantly impacts the authoring experience, it is recommended to reach out to Adobe Support or your AEM implementation partner for further investigation and assistance.

[kautuk_sahni]

@antoname8 Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!