fix(editor): fix performance issues when opening node or editing code node with a lot of data (#4388)

* debounce clicks

* debounce correctly

* debounce resize

* if initialized avoid

* set watcher fixes

* add deboucne for setting values

* increase debounce

* reset workspace for memory issues

* address comment

* decrease debounce time

* decrease debounce time

* clean up

* revert back to trailing

* support dbl

packages/editor-ui/src/components/NDVDraggablePanels.vue

@@ -12,7 +12,7 @@
 				:width="relativeWidthToPx(mainPanelDimensions.relativeWidth)"
 				:minWidth="MIN_PANEL_WIDTH"
 				:gridSize="20"
-				@resize="onResize"
+				@resize="onResizeDebounced"
 				@resizestart="onResizeStart"
 				@resizeend="onResizeEnd"
 				:supportedDirections="supportedResizeDirections"
@@ -47,6 +47,8 @@ import {
 	LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH,
 	MAIN_NODE_PANEL_WIDTH,
 } from '@/constants';
+import mixins from 'vue-typed-mixins';
+import { debounceHelper } from './mixins/debounce';
 
 
 const SIDE_MARGIN = 24;
@@ -63,7 +65,7 @@ const initialMainPanelWidth:{ [key: string]: number } = {
 	wide: MAIN_NODE_PANEL_WIDTH * 2,
 };
 
-export default Vue.extend({
+export default mixins(debounceHelper).extend({
 	name: 'NDVDraggablePanels',
 	components: {
 		PanelDragButton,
@@ -83,11 +85,12 @@ export default Vue.extend({
 			default: () => ({}),
 		},
 	},
-	data(): { windowWidth: number, isDragging: boolean, MIN_PANEL_WIDTH: number} {
+	data(): { windowWidth: number, isDragging: boolean, MIN_PANEL_WIDTH: number, initialized: boolean} {
 		return {
 			windowWidth: 1,
 			isDragging: false,
 			MIN_PANEL_WIDTH,
+			initialized: false,
 		};
 	},
 	mounted() {
@@ -105,6 +108,9 @@ export default Vue.extend({
 
 		window.addEventListener('resize', this.setTotalWidth);
 		this.$emit('init', { position: this.mainPanelDimensions.relativeLeft });
+		setTimeout(() => {
+			this.initialized = true;
+		}, 0);
 	},
 	destroyed() {
 		window.removeEventListener('resize', this.setTotalWidth);
@@ -295,6 +301,11 @@ export default Vue.extend({
 		onResizeEnd() {
 			this.storePositionData();
 		},
+		onResizeDebounced(data: { direction: string, x: number, width: number}) {
+			if (this.initialized) {
+				this.callDebounced('onResize', { debounceTime: 10, trailing: true }, data);
+			}
+		},
 		onResize({ direction, x, width }: { direction: string, x: number, width: number}) {
 			const relativeDistance = this.pxToRelativeWidth(x);
 			const relativeWidth = this.pxToRelativeWidth(width);