Merge pull request #929 from anonymousRecords/feat/fix-grainient-mount-flicker

fix(Grainient): render initial frame in setSize to prevent flicker

Author: DavidHDev

src/content/Backgrounds/Grainient/Grainient.jsx

@@ -186,6 +186,7 @@ const Grainient = ({
       const res = program.uniforms.iResolution.value;
       res[0] = gl.drawingBufferWidth;
       res[1] = gl.drawingBufferHeight;
+      renderer.render({ scene: mesh });
     };
 
     const ro = new ResizeObserver(setSize);
@@ -238,4 +239,4 @@ const Grainient = ({
   return <div ref={containerRef} className={`grainient-container ${className}`.trim()} />;
 };
 
-export default Grainient;
+export default Grainient;

src/tailwind/Backgrounds/Grainient/Grainient.jsx

@@ -185,6 +185,7 @@ const Grainient = ({
       const res = program.uniforms.iResolution.value;
       res[0] = gl.drawingBufferWidth;
       res[1] = gl.drawingBufferHeight;
+      renderer.render({ scene: mesh });
     };
 
     const ro = new ResizeObserver(setSize);

src/ts-default/Backgrounds/Grainient/Grainient.tsx

@@ -212,6 +212,7 @@ const Grainient: React.FC<GrainientProps> = ({
       const res = (program.uniforms.iResolution as { value: Float32Array }).value;
       res[0] = gl.drawingBufferWidth;
       res[1] = gl.drawingBufferHeight;
+      renderer.render({ scene: mesh });
     };
 
     const ro = new ResizeObserver(setSize);

src/ts-tailwind/Backgrounds/Grainient/Grainient.tsx

@@ -211,6 +211,7 @@ const Grainient: React.FC<GrainientProps> = ({
       const res = (program.uniforms.iResolution as { value: Float32Array }).value;
       res[0] = gl.drawingBufferWidth;
       res[1] = gl.drawingBufferHeight;
+      renderer.render({ scene: mesh });
     };
 
     const ro = new ResizeObserver(setSize);