added custom skeleton loader

src/lib/LazyImage.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+/**
+ * Renders an image lazily using the Intersection Observer API.
+ * The image is initially hidden and becomes visible once it enters the viewport.
+ * This approach improves performance by only loading images that are actually visible to the user.
+ * 
+ * @returns {JSX.Element} - The lazy image component.
+ */
+function LazyImage({ src, alt }) {
+  const imgRef = useRef();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(imgRef.current); // Stop observing once the image is in the viewport
+        }
+      },
+      {
+        root: null, // Viewport
+        rootMargin: '0px', // No margin
+        threshold: 0.1, // Percentage of the image that needs to be visible
+      }
+    );
+
+    if (imgRef.current) {
+      observer.observe(imgRef.current);
+    }
+
+    return () => {
+      if (imgRef.current) {
+        observer.unobserve(imgRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <img
+      ref={imgRef}
+      src={isVisible ? src : ''}
+      alt={alt}
+      loading="lazy"
+      className={isVisible ? 'visible' : 'hidden'} // You can apply CSS classes for animations
+    />
+  );
+}
+
+export default LazyImage;

src/lib/SkeletonLoaders.js

@@ -0,0 +1,14 @@
+import "../assets/css/skeleton-loader.css"
+
+/**
+ * Renders a placeholder `<div>` element with the class name "image-skeleton-loader".
+ * This component is typically used as a placeholder for an image while it is being loaded.
+ * The CSS class "image-skeleton-loader or blog-text-skeleton-loader" can be used to style the placeholder element.
+ *
+ * @returns {React.Element} The rendered `<div>` element with the class name "image-skeleton-loader or blog-text-skeleton-loader".
+ */
+export const ImageLoader = () => <div className="image-skeleton-loader" />;
+
+export const BlogLoader = () => <div className="blog-text-skeleton-loader" />
+
+