perf: optimized gradientblinds

src/components/effects/GradientBlinds.test.tsx

@@ -13,34 +13,37 @@ vi.mock('ogl', () => {
         drawingBufferWidth: 100,
         drawingBufferHeight: 100,
       };
-      setSize() {}
-      render() {}
+      setSize() { }
+      render() { }
     },
     Program: class {
-        remove() {}
+      remove() { }
     },
     Mesh: class {
-        remove() {}
+      remove() { }
     },
     Geometry: class {
-        remove() {}
+      remove() { }
     },
     Triangle: class {
-        remove() {}
+      remove() { }
     },
+
   };
 });
 
 // Mock ResizeObserver
 globalThis.ResizeObserver = class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
+  observe() { }
+  unobserve() { }
+  disconnect() { }
 };
 
 describe('GradientBlinds', () => {
   let rafSpy: any;
   let cancelRafSpy: any;
+  let addEventListenerSpy: any;
+  let removeEventListenerSpy: any;
   let ioCallback: (entries: IntersectionObserverEntry[]) => void;
   let observeSpy: any;
   let disconnectSpy: any;
@@ -51,6 +54,8 @@ describe('GradientBlinds', () => {
     });
     cancelRafSpy = vi.spyOn(window, 'cancelAnimationFrame').mockImplementation((_id: number) => {
     });
+    addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+    removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
 
     // Mock IntersectionObserver
     observeSpy = vi.fn();
@@ -133,6 +138,44 @@ describe('GradientBlinds', () => {
     expect(disconnectSpy).toHaveBeenCalled();
   });
 
+  it('toggles pointer event listener based on visibility', () => {
+    const { unmount } = render(<GradientBlinds />);
+
+    // Should not listen initially (not visible)
+    // Initially not called
+    expect(addEventListenerSpy).not.toHaveBeenCalledWith('pointermove', expect.any(Function));
+
+    // Simulate on-screen
+    act(() => {
+      if (ioCallback) {
+        ioCallback([{ isIntersecting: true } as IntersectionObserverEntry]);
+      }
+    });
+    expect(addEventListenerSpy).toHaveBeenCalledWith('pointermove', expect.any(Function));
+
+    // Reset
+    addEventListenerSpy.mockClear();
+    removeEventListenerSpy.mockClear();
+
+    // Simulate off-screen
+    act(() => {
+      if (ioCallback) {
+        ioCallback([{ isIntersecting: false } as IntersectionObserverEntry]);
+      }
+    });
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('pointermove', expect.any(Function));
+
+    // Simulate on-screen again
+    act(() => {
+      if (ioCallback) {
+        ioCallback([{ isIntersecting: true } as IntersectionObserverEntry]);
+      }
+    });
+    expect(addEventListenerSpy).toHaveBeenCalledWith('pointermove', expect.any(Function));
+
+    unmount();
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('pointermove', expect.any(Function));
+  });
   it('minimizes getBoundingClientRect calls during pointer move', () => {
     const { unmount } = render(<GradientBlinds />);
 
@@ -155,8 +198,7 @@ describe('GradientBlinds', () => {
       window.dispatchEvent(event);
     });
 
-    // EXPECTATION: It should NOT be called.
-    // This will fail currently.
+    // EXPECTATION: It should NOT be called because the listener shouldn't be attached (not visible)
     expect(spy).not.toHaveBeenCalled();
 
     unmount();