Chat spinner and styling

1 files changed, 9 insertions, 15 deletions

diff --git a/vnext/src/components/Contacts.js b/vnext/src/components/Contacts.js
index 84a6ec9f..bdbc5a01 100644
--- a/vnext/src/components/Contacts.js
+++ b/vnext/src/components/Contacts.js
@@ -4,6 +4,7 @@ import { getChats } from '../api';
 
 
 import Contact from './Contact.js';
+import { ChatSpinner } from './Spinner';
 
 export default class Contacts extends React.Component {
     constructor(props) {
@@ -28,17 +29,13 @@ export default class Contacts extends React.Component {
     render() {
         const { pms } = this.state;
         return (
-            <div className="msgs">
-                <div style={wrapperStyle} className="msg-cont">
-                    <ul style={chatListStyle}>
-                        {
-                            pms && pms.map((chat) =>
-                                <li key={chat.uname} style={chatTitleStyle}>
-                                    <Contact key={chat.uname} user={chat} />
-                                </li>
-                            )
-                        }
-                    </ul>
+            <div className="msg-cont">
+                <div style={chatListStyle}>
+                    {
+                        pms.length ? pms.map((chat) =>
+                            <Contact key={chat.uname} user={chat} style={chatTitleStyle} />
+                        ) : <><ChatSpinner /><ChatSpinner /><ChatSpinner /><ChatSpinner /><ChatSpinner /></>
+                    }
                 </div>
             </div>
         );
@@ -51,17 +48,14 @@ const wrapperStyle = {
 };
 
 const chatListStyle = {
-    boxSizing: 'border-box',
-    padding: '0 20px',
     display: 'flex',
-    alignItems: 'center',
     flexDirection: 'column',
     width: '100%'
 };
 
 const chatTitleStyle = {
     width: '100%',
-    padding: '3px 6px',
+    padding: '12px',
     textAlign: 'left',
     background: '#fff',
     color: '#222',