aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Avatar.js2
-rw-r--r--vnext/src/components/Contact.js4
-rw-r--r--vnext/src/components/Contacts.js24
-rw-r--r--vnext/src/components/Settings.js4
-rw-r--r--vnext/src/components/Spinner.js16
5 files changed, 30 insertions, 20 deletions
diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
index 4c3ac0b6..002badde 100644
--- a/vnext/src/components/Avatar.js
+++ b/vnext/src/components/Avatar.js
@@ -8,7 +8,7 @@ import Icon from './Icon';
const Avatar = React.memo(props => {
return (
- <div style={{ display: 'flex', padding: '12px' }}>
+ <div style={Object.assign({ display: 'flex', padding: '12px' }, props.style)}>
<div className="msg-avatar">
{
props.user.uname ?
diff --git a/vnext/src/components/Contact.js b/vnext/src/components/Contact.js
index 4b8901a8..dd68d338 100644
--- a/vnext/src/components/Contact.js
+++ b/vnext/src/components/Contact.js
@@ -3,9 +3,9 @@ import { UserType } from './Types';
import Avatar from './Avatar';
-const Contact = React.memo(({ user, ...rest }) => {
+const Contact = React.memo(({ user, style, ...rest }) => {
return (
- <Avatar user={user} link={`/pm/${user.uname}`}>
+ <Avatar user={user} link={`/pm/${user.uname}`} style={style}>
{user.unreadCount && <span className="badge">{user.unreadCount}</span>}
<div className="msg-ts">{user.lastMessageText}</div>
</Avatar>
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',
diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js
index 14c81e38..06550194 100644
--- a/vnext/src/components/Settings.js
+++ b/vnext/src/components/Settings.js
@@ -68,7 +68,7 @@ export default class Settings extends React.Component {
render() {
const { me } = this.state;
return (
- <article>
+ <div className="msg-cont">
<h1>Settings</h1>
<fieldset>
<legend>Changing your avatar</legend>
@@ -231,7 +231,7 @@ export default class Settings extends React.Component {
}
</fieldset>
- </article>
+ </div>
);
}
}
diff --git a/vnext/src/components/Spinner.js b/vnext/src/components/Spinner.js
index a11426df..fffa2c80 100644
--- a/vnext/src/components/Spinner.js
+++ b/vnext/src/components/Spinner.js
@@ -20,3 +20,19 @@ export default function Spinner(props) {
</div>
);
}
+
+export function ChatSpinner(props) {
+ return (
+ <ContentLoader
+ speed={2}
+ primaryColor="#f8f8f8"
+ secondaryColor="#ecebeb"
+ height="60px"
+ width="120px"
+ {...props}>
+ <rect x="56" y="6" rx="0" ry="0" width="117" height="6.4" />
+ <rect x="56" y="20" rx="0" ry="0" width="85" height="6.4" />
+ <rect x="0" y="0" rx="0" ry="0" width="48" height="48" />
+ </ContentLoader>
+ );
+}