feat: loading state

RajSanjel · Jun 23, 2024 · b56c0d2 · b56c0d2
1 parent f586ede
commit b56c0d2
Showing 1 changed file with 19 additions and 11 deletions.
diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
@@ -3,13 +3,17 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
 export default function Blog() {
-
     const [blog, setBlog] = useState<any>(null);
+    const [loading, setLoading] = useState(true)
     const { slug } = useParams();
     const { getBlog } = useBlogs();
     const fetchBlog = async () => {
         const res = await getBlog(slug || "");
-        setBlog(res);
+        if (res !== undefined) {
+            setBlog(res);
+            setLoading(false)
+        }
+
         document.title = blog.title
     };
 
@@ -19,15 +23,19 @@ export default function Blog() {
 
     return (
         <div >
-            {!!blog ? (
-                <section className="container md:w-2/3 w-full mb-3 break-words">
-                    <h1 className="text-4xl font-semibold text-justify">{blog.title}</h1>
-                    <hr className="my-4" />
-                    <div className="text-justify blog mb-8 grid gap-3" dangerouslySetInnerHTML={{ __html: blog.content }} ></div>
-                </section>
-            ) : (
-                <h1 className="text-4xl container text-center">No blog found</h1>
-            )}
+            {loading ? <div className="text-center">
+                Loading blog...
+            </div> :
+                !!blog ? (
+                    <section className="container md:w-2/3 w-full mb-3 break-words">
+                        <h1 className="text-4xl font-semibold text-justify">{blog.title}</h1>
+                        <hr className="my-4" />
+                        <div className="text-justify blog mb-8 grid gap-3" dangerouslySetInnerHTML={{ __html: blog.content }} ></div>
+                    </section>
+                ) : (
+                    <h1 className="text-4xl container text-center">No blog found</h1>
+                )
+            }
         </div>
     );
 }