fix: simultaneous loading causes page blocking

Author: wibus-wee

components/Video/index.tsx

@@ -1,33 +1,41 @@
 import { useEffect, useRef } from 'react';
 
+const observerOptions = {
+  root: null,
+  rootMargin: '0px',
+  threshold: 0.5,
+};
+
 export default function Video({ src }) {
   const videoRef = useRef(null);
+  const observerRef = useRef(null);
 
   useEffect(() => {
-    const options = {
-      root: null, 
-      rootMargin: '0px',
-      threshold: 0.5,
-    };
-
-    const handleIntersection = (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          videoRef.current.play();
-        } else {
-          videoRef.current.pause();
-        }
-      });
-    };
-
-    const observer = new IntersectionObserver(handleIntersection, options);
-    observer.observe(videoRef.current);
+    observerRef.current = new IntersectionObserver(handleIntersection, observerOptions);
+    if (videoRef.current) {
+      observerRef.current.observe(videoRef.current);
+    }
 
     return () => {
-      videoRef.current && observer.unobserve(videoRef.current);
+      if (videoRef.current && observerRef.current) {
+        observerRef.current.unobserve(videoRef.current);
+      }
     };
   }, [src]);
 
+  const handleIntersection = (entries: IntersectionObserverEntry[]) => {
+    entries.forEach((entry: IntersectionObserverEntry) => {
+      if (entry.isIntersecting) {
+        if (!videoRef.current.src) {
+          videoRef.current.src = src;
+        }
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+      }
+    });
+  };
+
   return (
     <video
       ref={videoRef}
@@ -37,8 +45,6 @@ export default function Video({ src }) {
       loop
       controls
       className="mt-6 rounded-xl border dark:border-zinc-800"
-    >
-      <source src={src} type="video/mp4" />
-    </video>
+    />
   );
 }