(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', 'd2szwvl7yo497w.cloudfront.net'],
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -71,6 +71,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.50.1",
     "react-icons": "^5.1.0",
+    "react-lazy-load-image-component": "^1.6.0",
     "react-notion-x": "^6.16.0",
     "react-resizable-panels": "^1.0.7",
     "recoil": "^0.7.7",
@@ -103,6 +104,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-lazy-load-image-component": "^1.6.4",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "@vitejs/plugin-react": "^4.3.0",

src/components/Certificate.tsx

@@ -12,6 +12,7 @@ import { FaFileImage, FaLinkedin, FaTwitter } from 'react-icons/fa';
 import { useGenerateCertificate } from '@/hooks/useCertGen';
 import { OneCertificate } from '@/utiles/certificate';
 import { useMemo } from 'react'; //used to fix maximum update depth exceeded err
+import { LazyLoadImage } from './LazyLoadImage';
 
 export const CertificateComponent = ({
   certificateId,
@@ -76,10 +77,12 @@ export const CertificateComponent = ({
   return (
     <Card className="w-500 my-4" key={course.id}>
       <CardContent className="flex justify-center">
-        <img
+        <LazyLoadImage
           src={certificateImageUrl}
-          alt=""
+          alt="ceritificate-url"
           className="w-full max-w-screen-md"
+          width={500}
+          height={250}
         />
       </CardContent>
       <CardHeader>

src/components/CertificateVerify.tsx

@@ -3,6 +3,7 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Certificate, Course, User } from '@prisma/client';
 import { useGenerateCertificate } from '@/hooks/useCertGen';
+import { LazyLoadImage } from './LazyLoadImage';
 
 export const CertificateVerify = ({
   certificate,
@@ -25,10 +26,12 @@ export const CertificateVerify = ({
         <Card className="my-4">
           <CardContent className="w-[90vw] max-w-[800px] flex-none">
             {certificateImageUrl ? (
-              <img
+              <LazyLoadImage
                 src={certificateImageUrl}
                 alt="Generated Certificate"
                 className="h-auto w-full"
+                width={500}
+                height={250}
               />
             ) : (
               <div className="flex min-h-[500px] items-center justify-center">

src/components/CourseCard.tsx

@@ -6,6 +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 './LazyLoadImage';
 
 export const CourseCard = ({
   course,
@@ -44,7 +45,13 @@ export const CourseCard = ({
             />
           )}
       </div>
-      <img src={course.imageUrl} alt={course.title} className="rounded-md" />
+      <LazyLoadImage
+        alt={course.title}
+        src={course.imageUrl}
+        width={400}
+        height={250}
+        className="rounded-md"
+      />
       <div className="p-2">
         <div className="flex justify-between">
           <div className="mb-2 mt-4">{course.title} Cohort</div>

src/components/LazyLoadImage.tsx

@@ -0,0 +1,61 @@
+'use client';
+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)' }}
+    />
+  );
+};

src/components/landing/logo/logo.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import localFont from 'next/font/local';
 import { cn } from '@/lib/utils';
+import { LazyLoadImage } from '@/components/LazyLoadImage';
 
 const headingFont = localFont({
   src: '../../../../public/fonts/font.woff2',
@@ -10,7 +11,8 @@ const Logo = ({ onFooter = false }: { onFooter: boolean }) => {
   return (
     <Link href={'/'}>
       <div className="flex items-center gap-x-2 transition hover:opacity-90">
-        <img
+        <LazyLoadImage
+          alt="logo"
           src={
             'https://d2szwvl7yo497w.cloudfront.net/courseThumbnails/main.png'
           }

src/components/videothumbnail.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import VideoPreview from '@/actions/videopreview/videoPreview';
 import { useEffect } from 'react';
+import { LazyLoadImage } from './LazyLoadImage';
 import CardComponent from './CardComponent';
 
 const VideoThumbnail = ({
@@ -29,6 +30,7 @@ const VideoThumbnail = ({
   const handleMouseLeave = () => {
     setHover(false);
   };
+
   return (
     <div
       className="m relative max-h-[573px] max-w-[1053px]"
@@ -45,9 +47,11 @@ const VideoThumbnail = ({
         ) : (
           <>
             {imageUrl ? (
-              <img
+              <LazyLoadImage
                 src={imageUrl}
                 alt="Video Thumbnail"
+                width={500}
+                height={250}
                 className="h-full w-full object-cover"
               />
             ) : (