Lazy loading images

Author: SHYAKA-Aime

src/components/home/AboutUs.tsx

@@ -21,7 +21,7 @@ const AboutUs = () => {
 
 
       <div className="flex flex-col lg:flex-row items-center  mb-10 px-10 gap-7 space-x-7">
-        <img src={image} alt="Andela Engineers" className="w-[500px] h-auto rounded-lg shadow-md mb-6 lg:mb-0" />
+        <img src={image} alt="Andela Engineers" className="w-[500px] h-auto rounded-lg shadow-md mb-6 lg:mb-0" loading="lazy"/>
 
         <div className='max-w-2xl px-10'>
           <h1 className='text-3xl sm:text-4xl md:text-5xl font-bold mb-4 leading-tight dark:text-white'>

src/components/home/Blogs.tsx

@@ -34,7 +34,7 @@ import { toast } from 'react-toastify';
 const BlogCard = ({ blog }: { blog: Blog }) => (
   <div key={blog.id} className="bg-gray-200 dark:bg-dark-frame-bg dark:text-white text-primary shadow-lg rounded-lg cursor-pointer hover:shadow-xl transition duration-300" >
     <Link to={`/blogs/${blog.id}`}>
-    <img src={blog.coverImage} alt={blog.title} className="w-full h-40 object-cover mb-4" />
+    <img src={blog.coverImage} alt={blog.title} className="w-full h-40 object-cover mb-4" loading="lazy"/>
     </Link>
     <div className="p-3">
     <Link to={`/blogs/${blog.id}`}>