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

src/components/Blog/BlogDetail.js

@@ -16,16 +16,20 @@ import StickyHeaderNav from "../StickyHeader/StickyHeaderNav";
  */
 function BlogDetail() {
   const [drawer, drawerAction] = useToggle(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [blogs, setBlogs] = useState([]);
   const { id } = useParams();
 
   useEffect(() => {
     const fetchBlogs = async () => {
+      setIsLoading(true);
       try {
         const res = await BlogData();
         setBlogs(res.data);
       } catch (err) {
         console.log("Error loading blogdata", err);
+      } finally {
+        setIsLoading(false);
       }
     };
 
@@ -52,7 +56,7 @@ function BlogDetail() {
           { link: "/blog", title: "Blogs" },
           {
             link: `/blog/blogdetail/${id}`,
-            title: blogItem ? blogItem.post_title : "Post not found",
+            title: isLoading ? "please wait..." : blogItem ? blogItem.post_title : "Post not found",
           },
         ]}
       />
@@ -62,7 +66,7 @@ function BlogDetail() {
         <div className="container">
           <div className="row">
             <div className="col-lg-8 col-md-7">
-              <Blog blogItem={blogItem} imgUrl={blogs?.image_url} />
+              <Blog blogItem={blogItem} imgUrl={blogs?.image_url} loader={isLoading} />
             </div>
             <div className="col-lg-4 col-md-5">
               <BlogSideBar blogs={blogs} />