perf: Do not re-render breakpoint canvas on toggling

Author: surajshetty3416

frontend/src/components/BuilderCanvas.vue

@@ -43,7 +43,8 @@
 					background: canvasProps.background,
 					width: `${breakpoint.width}px`,
 				}"
-				v-for="breakpoint in visibleBreakpoints"
+				v-for="breakpoint in renderedBreakpoints"
+				v-show="breakpoint.visible"
 				:key="breakpoint.device">
 				<div
 					class="absolute left-0 cursor-pointer select-none text-3xl text-gray-700 dark:text-zinc-300"
@@ -139,6 +140,7 @@ const canvasProps = reactive({
 			displayName: "Desktop",
 			width: 1400,
 			visible: true,
+			renderedOnce: true,
 		},
 		{
 			icon: "tablet",
@@ -181,10 +183,6 @@ const { isOverDropZone } = useCanvasDropZone(
 	findBlock,
 );
 
-const visibleBreakpoints = computed(() => {
-	return canvasProps.breakpoints.filter((breakpoint) => breakpoint.visible);
-});
-
 onMounted(() => {
 	const canvasContainerEl = canvasContainer.value as unknown as HTMLElement;
 	const canvasEl = canvas.value as unknown as HTMLElement;
@@ -280,5 +278,10 @@ function selectBreakpoint(ev: MouseEvent, breakpoint: BreakpointConfig) {
 			breakpoint.visible = true;
 		}
 	}
+	if (breakpoint.visible) {
+		breakpoint.renderedOnce = true;
+	}
 }
+
+const renderedBreakpoints = computed(() => canvasProps.breakpoints.filter((bp) => bp.renderedOnce));
 </script>

frontend/src/types/Builder/BuilderCanvas.ts

@@ -7,6 +7,7 @@ export interface BreakpointConfig {
 	displayName: string;
 	width: number;
 	visible: boolean;
+	renderedOnce: boolean;
 }
 
 export interface CanvasProps {