(feat): Add lazy loading for images

next.config.js

@@ -17,6 +17,9 @@ const nextConfig = {
     }
     return config;
   },
+  images: {
+    domains: ['appx-recordings.s3.ap-south-1.amazonaws.com', 'cdn.dribbble.com'],
+  },
 };
 
 module.exports = nextConfig;

src/components/CourseCard.tsx

@@ -6,8 +6,7 @@ import { SecondaryButton } from './buttons/SecondaryButton';
 import { useRouter } from 'next/navigation';
 import { Button } from './ui/button';
 import { ChevronRight } from 'lucide-react';
-import { LazyLoadImage } from 'react-lazy-load-image-component';
-import 'react-lazy-load-image-component/src/effects/blur.css';
+import { LazyLoadImage } from './LazyLoadImage';
 
 export const CourseCard = ({
   course,
@@ -48,8 +47,9 @@ export const CourseCard = ({
       </div>
       <LazyLoadImage
         alt={course.title}
-        effect="blur"
         src={course.imageUrl}
+        width={400}
+        height={250}
         className="rounded-md"
       />
       <div className="p-2">

src/components/LazyLoadImage.tsx

@@ -0,0 +1,60 @@
+import Image from 'next/image';
+import React, { useState, useRef, useEffect } from 'react';
+
+const registerObserver = (
+  ref: React.RefObject<Element>,
+  setShowImage: React.Dispatch<React.SetStateAction<boolean>>,
+) => {
+  if (!ref.current) {
+    console.log(' Ref is not attached to a DOM element');
+    return;
+  }
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach((entry) => {
+      if (!entry.isIntersecting) return;
+      setShowImage(true);
+      observer.disconnect();
+    });
+  });
+  observer.observe(ref.current);
+};
+
+interface LazyLoadImageProps {
+  src: string;
+  alt: string;
+  className: string;
+  width?: number;
+  height?: number;
+}
+export const LazyLoadImage = ({
+  src,
+  alt,
+  className,
+  width,
+  height,
+}: LazyLoadImageProps) => {
+  const [showImage, setshowImage] = useState(false);
+  const imgRef = useRef(null);
+  useEffect(() => {
+    registerObserver(imgRef, setshowImage);
+  }, []);
+  return showImage ? (
+    <Image
+      alt={alt}
+      src={src}
+      className={className}
+      width={width}
+      height={height}
+    />
+  ) : (
+    <Image
+      alt={alt}
+      src={src}
+      className={className}
+      width={width}
+      height={height}
+      ref={imgRef}
+      style={{ filter: 'blur(4px)' }}
+    />
+  );
+};