fix: stable background blur previews in settings

1 files changed, 8 insertions, 9 deletions

diff --git a/apps/web/src/components/editor/panels/assets/views/settings/background.tsx b/apps/web/src/components/editor/panels/assets/views/settings/background.tsx
index bbceac7d..72883e35 100644
--- a/apps/web/src/components/editor/panels/assets/views/settings/background.tsx
+++ b/apps/web/src/components/editor/panels/assets/views/settings/background.tsx
@@ -17,23 +17,24 @@ import { colors } from "@/data/colors/solid";
 import { syntaxUIGradients } from "@/data/colors/syntax-ui";

 import { useEditor } from "@/hooks/use-editor";

 import { effectPreviewService } from "@/services/renderer/effect-preview";

-import type { TCanvasSize } from "@/lib/project/types";

 import { cn } from "@/utils/ui";

 

+const BLUR_PREVIEW_UNIFORM_DIMENSIONS = {

+	width: 1920,

+	height: 1080,

+} as const;

+

 const BlurPreview = memo(

 	({

 		blur,

-		canvasSize,

 		isSelected,

 		onSelect,

 	}: {

 		blur: { label: string; value: number };

-		canvasSize: TCanvasSize;

 		isSelected: boolean;

 		onSelect: () => void;

 	}) => {

 		const canvasRef = useRef<HTMLCanvasElement>(null);

-		const { width, height } = canvasSize;

 

 		useEffect(() => {

 			const renderPreview = () => {

@@ -43,13 +44,13 @@ const BlurPreview = memo(
 					effectType: "blur",

 					params: { intensity: blur.value },

 					targetCanvas: canvasRef.current,

-					uniformDimensions: { width, height },

+					uniformDimensions: BLUR_PREVIEW_UNIFORM_DIMENSIONS,

 				});

 			};

 

 			renderPreview();

 			return effectPreviewService.onPreviewImageReady({ callback: renderPreview });

-		}, [blur.value, width, height]);

+		}, [blur.value]);

 

 		return (

 			<button

@@ -169,7 +170,6 @@ export function BackgroundContent() {
 	const currentBackgroundColor = isColorBackground

 		? (activeProject.settings.background as { color: string }).color

 		: DEFAULT_BACKGROUND_COLOR;

-	const canvasSize = activeProject.settings.canvasSize;

 

 	const blurPreviews = useMemo(

 		() =>

@@ -177,12 +177,11 @@ export function BackgroundContent() {
 				<BlurPreview

 					key={blur.value}

 					blur={blur}

-					canvasSize={canvasSize}

 					isSelected={isBlurBackground && currentBlurIntensity === blur.value}

 					onSelect={() => handleBlurSelect(blur.value)}

 				/>

 			)),

-		[canvasSize, isBlurBackground, currentBlurIntensity, handleBlurSelect],

+		[isBlurBackground, currentBlurIntensity, handleBlurSelect],

 	);

 

 	return (