From 962b30edf04e303cc57f8dab6407337d1f35df41 Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Fri, 4 Sep 2020 18:50:50 +0200
Subject: [PATCH] Add loading state to dashboard

---
 src/components/Dashboard/MeetingList.js |  2 +-
 src/screens/Dashboard.js                | 46 +++++++++++++++++++------
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/components/Dashboard/MeetingList.js b/src/components/Dashboard/MeetingList.js
index 740daa8..8b47b51 100644
--- a/src/components/Dashboard/MeetingList.js
+++ b/src/components/Dashboard/MeetingList.js
@@ -72,7 +72,7 @@ const alignRight = {
 	justifyContent: 'center',
 	alignItems: 'center',
     height: '60px',
-    alignSelf: 'right'
+    marginLeft: 'auto'
 };
 
 const slimText = {
diff --git a/src/screens/Dashboard.js b/src/screens/Dashboard.js
index 3624ac8..df07a84 100644
--- a/src/screens/Dashboard.js
+++ b/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>
+			)}
 		</>
 	);
 }