Add loading state to dashboard

src/components/Dashboard/MeetingList.js

@@ -72,7 +72,7 @@ const alignRight = {
 	justifyContent: 'center',
 	alignItems: 'center',
     height: '60px',
-    alignSelf: 'right'
+    marginLeft: 'auto'
 };
 
 const slimText = {

src/screens/Dashboard.js

@@ -1,15 +1,18 @@
 import React, { useEffect, useState } from 'react';
-import { Panel, Divider, List, Icon, FlexboxGrid } from 'rsuite';
+import { Panel, Placeholder, Loader } from 'rsuite';
 
 import { NavBar, MeetingList } from '../components';
 
 import './styles/layout.less';
 import { backend } from '../helpers/http-common';
 
+const { Paragraph } = Placeholder;
+
 export default function Dashboard({ currentUser }) {
 	const [meetings, setMeetings] = useState([]);
 	const [confirmed, setConfirmed] = useState();
 	const [unconfirmed, setUnconfirmed] = useState();
+	const [loading, setLoading] = useState(true);
 
 	useEffect(() => {
 		backend
@@ -27,6 +30,7 @@ export default function Dashboard({ currentUser }) {
 				setConfirmed(confirmed);
 				setUnconfirmed(unconfirmed);
 				setMeetings(allMeetings);
+				setLoading(false);
 			})
 			.catch((error) => console.log(error));
 	}, []);
@@ -34,16 +38,36 @@ export default function Dashboard({ currentUser }) {
 	return (
 		<>
 			<NavBar title='Dashboard' />
-			<Panel className={'app-container'}>
-				<h2>Invitations</h2>
-				{meetings.length === 0 && <p>You have no meetings.</p>}
-				{confirmed && (
-					<MeetingList meetings={confirmed} status={'Confirmed'} />
-				)}
-				{unconfirmed && (
-					<MeetingList meetings={unconfirmed} status={'To confirm'} />
-				)}
-			</Panel>
+			{loading ? (
+				<Panel className={'app-container'}>
+					<h2>Invitations</h2>
+					<h4>Confirmed</h4>
+					<Paragraph style={{ marginTop: 30 }} graph='square'>
+						<Loader backdrop content='loading...' vertical />
+					</Paragraph>
+					<h4>To confirm</h4>
+					<Paragraph style={{ marginTop: 30 }} graph='square'>
+						<Loader backdrop content='loading...' vertical />
+					</Paragraph>
+				</Panel>
+			) : (
+				<Panel className={'app-container'}>
+					<h2>Invitations</h2>
+					{confirmed && (
+						<MeetingList
+							meetings={confirmed}
+							status={'Confirmed'}
+						/>
+					)}
+					{unconfirmed && (
+						<MeetingList
+							meetings={unconfirmed}
+							status={'To confirm'}
+						/>
+					)}
+					{meetings.length === 0 && <p>You have no meetings.</p>}
+				</Panel>
+			)}
 		</>
 	);
 }