diff options
Diffstat (limited to 'vnext/src/components/Contacts.js')
| -rw-r--r-- | vnext/src/components/Contacts.js | 24 |
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', |