loader while loading posts and error formatting

VaibhavArora314 · May 27, 2024 · b3a3265 · b3a3265
1 parent dbaf6dd
commit b3a3265
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/frontend/src/components/Loader.tsx b/frontend/src/components/Loader.tsx
@@ -2,7 +2,7 @@ const Loader = () => {
   return (
     <div
       role="status"
-      className="h-screen w-screen flex items-center justify-center bg-gray-50"
+      className="h-screen w-screen flex items-center justify-center"
     >
       <svg
         aria-hidden="true"

diff --git a/frontend/src/pages/Posts.tsx b/frontend/src/pages/Posts.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
 import { PostData } from '../types';
+import Loader from '../components/Loader';
 
 const Posts = () => {
   const [posts, setPosts] = useState<PostData[]>([]);
@@ -24,11 +25,11 @@ const Posts = () => {
   }, []);
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <Loader/>;
   }
 
   if (error) {
-    return <div>{error}</div>;
+    return <div className='text-red-500 font-semibold text-lg text-center'>{error}</div>;
   }
 
   return (