From b3a3265ec033b93d1c9bf4a71683dfc64b59f7a2 Mon Sep 17 00:00:00 2001
From: VaibhavArora314 <vaibhav.afw@gmail.com>
Date: Mon, 27 May 2024 21:08:32 +0530
Subject: [PATCH] loader while loading posts and error formatting

---
 frontend/src/components/Loader.tsx | 2 +-
 frontend/src/pages/Posts.tsx       | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Loader.tsx b/frontend/src/components/Loader.tsx
index 67579b79..a4c17565 100644
--- 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
index 12644e76..1b371dd8 100644
--- 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 (