From 29991ea95da80b57f2aca5d44359925545d57d28 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 1 Nov 2025 04:41:51 -0700
Subject: [PATCH] replace react-intersection-observer package with mantine
 hooks

---
 package.json                         |  1 -
 pnpm-lock.yaml                       | 18 ------------------
 src/shared/hooks/use-in-viewport.ts  |  3 +++
 src/shared/hooks/use-intersection.ts |  3 +++
 4 files changed, 6 insertions(+), 19 deletions(-)
 create mode 100644 src/shared/hooks/use-in-viewport.ts
 create mode 100644 src/shared/hooks/use-intersection.ts

diff --git a/package.json b/package.json
index f07581a6..c7ba7710 100644
--- a/package.json
+++ b/package.json
@@ -119,7 +119,6 @@
         "react-i18next": "^11.18.6",
         "react-icons": "^5.5.0",
         "react-image": "^4.1.0",
-        "react-intersection-observer": "^9.16.0",
         "react-loading-skeleton": "^3.5.0",
         "react-player": "^2.11.0",
         "react-router": "^6.16.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c08471f1..6986c059 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -185,9 +185,6 @@ importers:
       react-image:
         specifier: ^4.1.0
         version: 4.1.0(@babel/runtime@7.27.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react-intersection-observer:
-        specifier: ^9.16.0
-        version: 9.16.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react-loading-skeleton:
         specifier: ^3.5.0
         version: 3.5.0(react@19.1.0)
@@ -4483,15 +4480,6 @@ packages:
       react: '>=16.8'
       react-dom: '>=16.8'
 
-  react-intersection-observer@9.16.0:
-    resolution: {integrity: sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==}
-    peerDependencies:
-      react: ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -10364,12 +10352,6 @@ snapshots:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
-  react-intersection-observer@9.16.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      react-dom: 19.1.0(react@19.1.0)
-
   react-is@16.13.1: {}
 
   react-loading-skeleton@3.5.0(react@19.1.0):
diff --git a/src/shared/hooks/use-in-viewport.ts b/src/shared/hooks/use-in-viewport.ts
new file mode 100644
index 00000000..d45f0c49
--- /dev/null
+++ b/src/shared/hooks/use-in-viewport.ts
@@ -0,0 +1,3 @@
+import { useInViewport as useMantineInViewport } from '@mantine/hooks';
+
+export const useInViewport = useMantineInViewport;
diff --git a/src/shared/hooks/use-intersection.ts b/src/shared/hooks/use-intersection.ts
new file mode 100644
index 00000000..abef8375
--- /dev/null
+++ b/src/shared/hooks/use-intersection.ts
@@ -0,0 +1,3 @@
+import { useIntersection as useMantineIntersection } from '@mantine/hooks';
+
+export const useIntersection = useMantineIntersection;