lazy load in excursion component

src/app/page.tsx

@@ -27,7 +27,6 @@ export default function App() {
     <div>
       <div className="min-h-screen 2xl:px-10 xl:px-8 sm:px-6 px-4 overflow-x-clip">
         <Header />
-
         <Showreel />
 
         <div className="relative container mx-auto 2xl:max-w-screen-2xl">
@@ -48,7 +47,6 @@ export default function App() {
       </div>
 
       <Footer />
-
       <ModalContainer />
     </div>
   );

src/components/ExcursionVR.tsx

@@ -1,3 +1,5 @@
+import { useInView } from "react-intersection-observer";
+import { useState, useEffect } from "react";
 import useModalStore from "@stores/useModalStore";
 import Button from "./Button";
 import Heading2 from "./Headings/Heading2";
@@ -6,11 +8,22 @@ import FeedbackModal from "./modals/FeedbackModal";
 /* eslint-disable @next/next/no-img-element */
 const ExcursionVR = () => {
   const [setModal] = useModalStore((state) => [state.setModal]);
+  const [isViewportEntered, setIsViewportEntered] = useState(false);
+  const { ref, inView } = useInView();
+
+  useEffect(() => {
+    if (!inView || isViewportEntered) return;
+
+    setIsViewportEntered(true);
+  }, [inView]);
 
   const handleBtnClick = () => setModal(<FeedbackModal />);
 
   return (
-    <div className="relative grid sm:grid-cols-2 2xl:gap-4 xl:gap-10 sm:gap-3 gap-4 2xl:mb-[200px] sm:mb-[120px] mb-20">
+    <div
+      className="relative grid sm:grid-cols-2 2xl:gap-4 xl:gap-10 sm:gap-3 gap-4 2xl:mb-[200px] sm:mb-[120px] mb-20"
+      ref={ref}
+    >
       <div className="flex flex-col justify-between">
         <div className="flex flex-col gap-8">
           <Heading2>
@@ -40,13 +53,13 @@ const ExcursionVR = () => {
             оценить и ощутить пространство
           </p>
           <img
-            src="/images/VR.png"
+            src={isViewportEntered ? "/images/VR.png" : ""}
             alt=""
             className="sm:px-6 sm:pt-8 sm:pb-5 p-4 pb-2 border-t border-[#3D425C] w-full"
           />
         </div>
         <video
-          src="/videos/vr.mp4"
+          src={isViewportEntered ? "/videos/vr.mp4" : ""}
           muted
           autoPlay
           loop
@@ -57,7 +70,7 @@ const ExcursionVR = () => {
 
       <div className="col-span-full sm:mt-8 mt-4 flex flex-col sm:gap-12 gap-8">
         <video
-          src="/videos/vr.mp4"
+          src={isViewportEntered ? "/videos/vr.mp4" : ""}
           muted
           autoPlay
           loop
@@ -82,7 +95,7 @@ const ExcursionVR = () => {
       </div>
 
       <div className="absolute -top-[50%] left-[16%] blur-[20px] -z-10">
-        <img src="/images/blendings/4.svg" alt="" />
+        <img src={isViewportEntered ? "/images/blendings/4.svg" : ""} alt="" />
       </div>
     </div>
   );