ue loader component

KRRISH96 · Feb 25, 2021 · c067f61 · c067f61
1 parent e52532a
commit c067f61
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/components/PostDetails/Comments.tsx b/src/components/PostDetails/Comments.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useFetch } from '../../hooks/useFetch';
+import Loader from '../Loader/Loader';
 
 interface Props {
   postId: number;
@@ -26,8 +27,8 @@ function Comments({ postId }: Props) {
 
   return (
     <div className="comments-container">
+      <h4>Comments ({comments?.length ?? 0})</h4>
       {loading && <h4>Fetching Comments... Hang Tight!</h4>}
-      <h4>Comments</h4>
       {comments != null && (
         <ul className="comments-list">
           {comments.map(({ postId, id, name, body }) => (
@@ -36,7 +37,7 @@ function Comments({ postId }: Props) {
               <p className="comment">{body}</p>
             </li>
           ))}
-          {!comments.length && <li>No Comments Yet</li>}
+          {!loading && !comments.length && <li>No Comments Yet</li>}
         </ul>
       )}
     </div>

diff --git a/src/components/PostDetails/PostDetails.tsx b/src/components/PostDetails/PostDetails.tsx
@@ -4,6 +4,7 @@ import { useParams, useHistory, Link } from 'react-router-dom';
 import { API_BASE_URL } from '../../constants';
 import { useFetch } from '../../hooks/useFetch';
 import BackButton from '../BackButton';
+import Loader from '../Loader/Loader';
 import { PostData } from '../Posts/Posts';
 import TextHighlighter from '../TextHighlighter';
 import Comments from './Comments';
@@ -70,7 +71,7 @@ function PostDetails() {
           <button onClick={() => setSearchText('')}>x clear search term</button>
         )}
       </div>
-      {loading && <h2>Fetching Post Details... Hang Tight!</h2>}
+      {loading && <Loader statusText="Fetching Post Details..." />}
       <article className="post-content card">
         <h2 className="post-content__title">
           <TextHighlighter

diff --git a/src/components/Posts/Posts.tsx b/src/components/Posts/Posts.tsx
@@ -11,6 +11,7 @@ import { DEFAULT_COUNT_PER_PAGE, DEFAULT_PAGE } from '../../constants';
 import Pagination from '../Pagination/Pagination';
 import PostsList from './PostsList';
 import './postsStyles.scss';
+import Loader from '../Loader/Loader';
 
 export interface PostData {
   userId: number;
@@ -122,7 +123,7 @@ function Posts() {
           <button onClick={clearFilters}>x clear filters</button>
         )}
       </div>
-      {loading && <h2>Fetching Posts... Sit Tight!</h2>}
+      {loading && <Loader statusText="Fetching Posts..." />}
       <PostsList posts={filteredPosts} titleFilter={titleFilter} />
       <Pagination
         page={Number(paginationQueryParams.page)}