added custom skeleton loader

src/components/Blog/Blog.js

@@ -1,21 +1,62 @@
-import React from "react";
 import singlePost from "../../assets/images/single-post/1.jpg";
+import { BlogLoader, ImageLoader } from "../../lib/SkeletonLoaders";
+import LazyImage from "../../lib/LazyImage";
 
-function Blog({ blogItem, imgUrl }) {
-  const blogImg =
-    blogItem?.meta_value != null
-      ? `${imgUrl}/${blogItem?.meta_value}`
-      : singlePost;
+/**
+ * Renders a blog post component.
+ * @returns {JSX.Element} The rendered blog post component.
+ */
+function Blog({ blogItem, imgUrl, loader }) {
+  // Generate a unique ID
+  const uniqueId = `element_${Math.random().toString(36).substr(2, 9)}`;
+
+  const blogImg = `${imgUrl}/${blogItem?.meta_value || singlePost}`;
+
+  const imgLoaderStyles = {
+    "--loader-width": "750px",
+    "--loader-height": "550px",
+  };
+
+  const headerLoaderStyles = {
+    "--text-container-width": "300px",
+    "--text-container-height": "34px",
+  };
+
+  const bodyTextLoaderStyles = {
+    "--text-container-width": "770px",
+    "--text-container-height": "150px",
+  };
 
   return (
     <>
       <div className="single-post-area">
-        <div className="post-thumb" style={{marginTop : "0"}}>
-          <img src={blogImg} alt="" />
+        <div className="post-thumb" style={{ marginTop: "0" }}>
+          {loader ? (
+            <div style={imgLoaderStyles}>
+              <ImageLoader />
+            </div>
+          ) : (
+            <LazyImage src={blogImg} alt={blogItem?.meta_value || "single-post.jpg"} key={uniqueId} />
+          )}
         </div>
-        <h4 className="article-title">{blogItem?.post_title}</h4>
-        <div dangerouslySetInnerHTML={{ __html: blogItem?.post_content }}></div>
+        {loader ? (
+          <div style={headerLoaderStyles}>
+            <BlogLoader />
+          </div>
+        ) : (
+          <h4 className="article-title">{blogItem?.post_title}</h4>
+        )}
+        {loader ? (
+          <div style={bodyTextLoaderStyles}>
+            <BlogLoader />
+          </div>
+        ) : (
+          <div
+            dangerouslySetInnerHTML={{ __html: blogItem?.post_content }}
+          ></div>
+        )}
       </div>
+
       {/* <blockquote>
         <p>
           I don't want no agro brilliant are you taking the piss skive off super