diff --git a/src/components/effects/GradientBlinds.test.tsx b/src/components/effects/GradientBlinds.test.tsx index 4a2789c..e29a176 100644 --- a/src/components/effects/GradientBlinds.test.tsx +++ b/src/components/effects/GradientBlinds.test.tsx @@ -66,8 +66,17 @@ describe('GradientBlinds', () => { vi.clearAllMocks(); }); - it('starts animation loop on mount', () => { + it('does not start animation loop on mount until visible', () => { const { unmount } = render(); + expect(rafSpy).not.toHaveBeenCalled(); + + // Simulate on-screen + act(() => { + if (ioCallback) { + ioCallback([{ isIntersecting: true } as IntersectionObserverEntry]); + } + }); + expect(rafSpy).toHaveBeenCalled(); unmount(); expect(cancelRafSpy).toHaveBeenCalled(); @@ -76,7 +85,15 @@ describe('GradientBlinds', () => { it('pauses animation loop when off-screen and resumes when on-screen', () => { const { unmount } = render(); - // Initial start + // Should not start initially + expect(rafSpy).not.toHaveBeenCalled(); + + // Simulate on-screen (start) + act(() => { + if (ioCallback) { + ioCallback([{ isIntersecting: true } as IntersectionObserverEntry]); + } + }); expect(rafSpy).toHaveBeenCalledTimes(1); // Reset spies to check for subsequent calls diff --git a/src/components/effects/GradientBlinds.tsx b/src/components/effects/GradientBlinds.tsx index 735c48e..7a1595e 100644 --- a/src/components/effects/GradientBlinds.tsx +++ b/src/components/effects/GradientBlinds.tsx @@ -349,8 +349,6 @@ void main() { }); observer.observe(container); - rafRef.current = requestAnimationFrame(loop); - return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); canvas.removeEventListener('pointermove', onPointerMove);