added custom skeleton loader

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} />