Chat spinner and styling

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>
+    );
+}