From 477b6deb29bf5ea6dd6adba62205cd10fcf9c36d Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Fri, 7 Dec 2018 14:36:45 +0300
Subject: Chat spinner and styling

---
 vnext/src/components/Contacts.js | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

(limited to 'vnext/src/components/Contacts.js')

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',
-- 
cgit v1.2.3