elementor / elementor/elementor

View Initialize triggering again without destroying the old instance when switching back from global panel

Open
#11,783 1 comment 0 reactions 0 assignees View on GitHub
mod/b*
Dominant language
PHP
Stars
7.1k
Forks
1.6k
Avg merge
1d 5h
Merged PRs (30d)
193

Description

## Prerequisites

- [x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- [x] The issue still exists against the latest stable version of Elementor.

## Description

When the Global Theme Style panel (`panel/global/style`) is closed (first switched to by going to the "Theme Style" option in the editor hamburger menu), it re-initializes all the view instances, meaning the `initialize` function for all the elements present on the page is executed again without destroying the previous instances first.

Because of the view re-initialization, all elements are given new `model-cid` but the since the older views aren't destroyed, all the event listeners (added using `listenTo`) still remain for the previous DOM elements and they are executed every time that event occurs causing unnecessary memory hog and performance issue.

## Steps to reproduce

As an example, let's log the `SortableBehavior`'s `editModeSwitched` trigger to see how many times that function is executing (since there's an event listener attached to it from the behavior's `initialize` class)

In the shipped `editor.js`, line `8832` (of the latest Elementor Core v2.9.13), if we log `'editmodeswitched', this.$el.data( 'model-cid' )`, it will show for which CIDs the function is executing.

Every time the Global Theme Style panel is closed to switch back to the normal editing interface, the number of times the message is logged doubles. Also, it can be seen that the previous `model-cid`'s that no longer exist, the function still executes for them.

This also shows that the function is executing all those extra times.

Another indicator of this is the browser's task manager. Every time the Global Style panel is switched back and forth (opened and closed to go into editing panel again), the Memory footprint for the tab (in which the Elementor editor is open) increases by 100MBs at my end. This is when the page only has 32 elements.

---

**The biggest question is - Why does everything have to be initialized again when the setting change is in the same interface?**

I suppose there could be a better approach to this. Can't it be done via AJAX like the Global Settings (which also syncs with the backend, does CSS processing and stuff.. similar to the global theme style kit)?

## Isolating the problem

- [x] This bug happens with only Elementor plugin active (and Elementor Pro).
- [x] This bug happens with a default WordPress theme active.
- [x] I can reproduce this bug consistently using the steps above.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.