aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components/Contacts.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components/Contacts.js')
-rw-r--r--vnext/src/components/Contacts.js24
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',