Description

Significant performance lag has been observed when working with maps that contain a large number of layers. This issue primarily impacts core UI interactions such as panning, zooming, accessing the resource catalogue, etc.

How to reproduce

• Create a map with a huge number of layers. I have prepared this map. Open this map. It has 77 (7 backgrounds, 70 others) layers.
• Do basic UI interactions like zooming, panning on the map, and try to open the catalogue
• The system will be lagging noticeably.
• Noticed: Lagging is more on the local development build than the production build

Expected Result
The system should not be lagging on basic UI interaction

Current Result
The system lags when there are huge number of layers

• Not browser related

Other useful information

Initial Investigation Output

Steps taken to identify the problem:

1. Created a test map with large number of layers.
2. Disabling the TOC plugin and removing groups did not improve performance.
3. I compared the same map with the production version(see above video), where it worked smoothly.
4. Enabled plugins one at a time:
   • No lag with only the Map plugin enabled.
   • Lag started again when enabling plugins like BrandNavbar, Save, SaveAs, DeleteResource, and ResourceDetails.
5. All these plugins use the same function: getPendingChanges, which includes a heavy calculation (computePendingChanges).
6. After commenting out all uses of this function, the lag disappeared.

Root Cause

• The function getPendingChanges, and more specifically computePendingChanges, is called very often.
• It runs on every UI interaction and state update, which causes lag when there are many layers.

Suggested Next Steps

• Look into optimizing or reducing the number of times getPendingChanges runs.