perf(component): use png instead of svg for rendering noise svg (#4935)

packages/frontend/component/src/components/workspace/index.css.ts

@@ -3,6 +3,7 @@ import type { ComplexStyleRule } from '@vanilla-extract/css';
 import { globalStyle, style } from '@vanilla-extract/css';
 
 import { breakpoints } from '../../styles/mui-theme';
+
 export const appStyle = style({
   width: '100%',
   position: 'relative',
@@ -22,9 +23,11 @@ export const appStyle = style({
       content: '""',
       position: 'absolute',
       inset: 0,
-      opacity: 'var(--affine-noise-opacity)',
+      opacity: 'var(--affine-noise-opacity, 0)',
-      backgroundSize: '25%',
+      backgroundRepeat: 'repeat',
-      backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
+      backgroundSize: '2.5%',
+      // todo: figure out how to use vanilla-extract webpack plugin to inject img url
+      backgroundImage: `var(--noise-background)`,
     },
   },
 });

packages/frontend/component/src/theme/global.css

@@ -8,6 +8,10 @@
   /*transition: all 0.1s;*/
 }
 
+:root {
+  --noise-background: url(./noise.png);
+}
+
 html,
 body,
 h1,