feat: add loading spinner component

Pranav016 · May 1, 2022 · d970036 · d970036
1 parent 3616704
commit d970036
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 40 deletions.
diff --git a/src/components/Spinner/LoadingSpinner.tsx b/src/components/Spinner/LoadingSpinner.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Spinner } from 'react-bootstrap';
+
+const LoadingSpinner = () => {
+	return (
+		<div
+			style={{
+				height: '80vh',
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+			}}>
+			<Spinner animation='border' variant='primary' role='status'>
+				<span className='visually-hidden'>Loading...</span>
+			</Spinner>
+		</div>
+	);
+};
+
+export default LoadingSpinner;
diff --git a/src/pages/SinglePost/SinglePost.tsx b/src/pages/SinglePost/SinglePost.tsx
@@ -16,6 +16,7 @@ import {
 	onSnapshot,
 	DocumentSnapshot,
 } from 'firebase/firestore';
+import LoadingSpinner from '../../components/Spinner/LoadingSpinner';
 
 const SinglePost = () => {
 	const { user, posts, addComment } = useContext(AppContext);
@@ -79,46 +80,49 @@ const SinglePost = () => {
 		addComment(filteredPost[0]?.id, newComment);
 		setSolution('');
 	};
-
-	return (
-		<div className='singlePostPage'>
-			<div className='nested-navbar'>
-				<Button onClick={handleBack}>Go Back</Button>
-			</div>
-			<div className='single-post'>
-				<Post
-					id={filteredPost[0]?.id}
-					authorEmail={filteredPost[0]?.data?.authorEmail}
-					heading={filteredPost[0]?.data?.heading}
-					content={filteredPost[0]?.data?.content}
-					tags={filteredPost[0]?.data?.tags}
-					votes={filteredPost[0]?.data?.votes}></Post>
-			</div>
-			<div className='addPost-input'>
-				<InputField
-					inputText={solution}
-					setInputText={setSolution}
-					label='Add Solution'
-					handleClick={handleClick}
-					buttonText={'Add'}
-				/>
+	if (filteredPost && comments) {
+		return (
+			<div className='singlePostPage'>
+				<div className='nested-navbar'>
+					<Button onClick={handleBack}>Go Back</Button>
+				</div>
+				<div className='single-post'>
+					<Post
+						id={filteredPost[0]?.id}
+						authorEmail={filteredPost[0]?.data?.authorEmail}
+						heading={filteredPost[0]?.data?.heading}
+						content={filteredPost[0]?.data?.content}
+						tags={filteredPost[0]?.data?.tags}
+						votes={filteredPost[0]?.data?.votes}></Post>
+				</div>
+				<div className='addPost-input'>
+					<InputField
+						inputText={solution}
+						setInputText={setSolution}
+						label='Add Solution'
+						handleClick={handleClick}
+						buttonText={'Add'}
+					/>
+				</div>
+				<div className='comments-console'>
+					{comments?.length
+						? comments?.map((comment: commentInterface) => (
+								<SingleComment
+									key={comment.id}
+									postId={postId as string}
+									commentId={comment.id}
+									authorEmail={comment.authorEmail}
+									content={comment.content}
+									votes={comment.votes}
+								/>
+						  ))
+						: 'No solutions found!'}
+				</div>
 			</div>
-			<div className='comments-console'>
-				{comments?.length
-					? comments?.map((comment: commentInterface) => (
-							<SingleComment
-								key={comment.id}
-								postId={postId as string}
-								commentId={comment.id}
-								authorEmail={comment.authorEmail}
-								content={comment.content}
-								votes={comment.votes}
-							/>
-					  ))
-					: 'No solutions found!'}
-			</div>
-		</div>
-	);
+		);
+	} else {
+		return <LoadingSpinner />;
+	}
 };
 
 export default SinglePost;
diff --git a/src/pages/UpdatePost/UpdatePost.tsx b/src/pages/UpdatePost/UpdatePost.tsx
@@ -2,6 +2,7 @@ import { DocumentData } from 'firebase/firestore';
 import React, { useContext, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import PostForm from '../../components/PostForm/PostForm';
+import LoadingSpinner from '../../components/Spinner/LoadingSpinner';
 import { AppContext } from '../../context/AppContext';
 
 const UpdatePost = () => {
@@ -26,7 +27,11 @@ const UpdatePost = () => {
 		);
 	}
 
-	return <div className='update-post'>{updationForm()}</div>;
+	return postData ? (
+		<div className='update-post'>{updationForm()}</div>
+	) : (
+		<LoadingSpinner />
+	);
 };
 
 export default UpdatePost;