diff --git a/email_mailbox/src/components/EmailLoading.js b/email_mailbox/src/components/EmailLoading.js
new file mode 100644
index 000000000..bdac63941
--- /dev/null
+++ b/email_mailbox/src/components/EmailLoading.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import './emailloading.scss';
+
+const EmailLoading = () => (
+
+);
+
+export default EmailLoading;
diff --git a/email_mailbox/src/components/Thread.js b/email_mailbox/src/components/Thread.js
index fbf54edca..a6781fa14 100644
--- a/email_mailbox/src/components/Thread.js
+++ b/email_mailbox/src/components/Thread.js
@@ -2,6 +2,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Email from './../containers/Email';
+import EmailLoading from './EmailLoading';
import Label from './Label';
import Message from '../containers/Message';
import './thread.scss';
@@ -105,6 +106,9 @@ class Thread extends Component {
};
renderEmails = () => {
+ if (!this.props.emails.length) {
+ return ;
+ }
const emailContainers = this.props.emails.map((email, index) => {
const isLast = this.props.emails.length - 1 === index;
return (
diff --git a/email_mailbox/src/components/emailloading.scss b/email_mailbox/src/components/emailloading.scss
new file mode 100644
index 000000000..18f7b66b4
--- /dev/null
+++ b/email_mailbox/src/components/emailloading.scss
@@ -0,0 +1,122 @@
+@import "./../styles/index.scss";
+
+.cptx-email-loading-container{
+ border: solid 1px transparent;
+ border-radius: 4px;
+ display: flex;
+ flex-direction: column;
+ height: calc(100% - 8px);
+ margin-bottom: 6px;
+ width: calc(100% - 2px);
+
+ .cptx-email-loading-info{
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ height: 65px;
+ margin: 5px 17px 0;
+ width: calc(100% - 32px);
+
+ .cptx-email-loading-info-letter{
+ border-radius: 50%;
+ height: 36px;
+ margin-right: 10px;
+ width: 36px;
+ @extend .animated-background;
+ }
+
+ .cptx-email-loading-info-content{
+ align-content: space-around;
+ display: flex;
+ flex-direction: column;
+ width: calc(100% - 46px);
+
+ .cptx-email-loading-text-line{
+ &:nth-child(1){
+ width: 35%;
+ }
+
+ &:nth-child(2){
+ margin-top: 10px;
+ width: 50%;
+ }
+ }
+ }
+ }
+
+ > hr{
+ background-color: transparent;
+ border: 0;
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ margin: 0 auto;
+ width: calc(100% - 20px);
+ }
+
+ .cptx-email-loading-body{
+ margin: 5px 17px 0;
+ width: calc(100% - 32px);
+
+ .cptx-email-loading-text-line{
+ &:nth-child(1){
+ margin-top: 40px;
+ width: 40%;
+ }
+
+ &:nth-child(2){
+ margin-top: 30px;
+ }
+
+ &:nth-child(3), &:nth-child(4){
+ margin-top: 10px;
+ }
+
+ &:nth-child(4){
+ width: 60%;
+ }
+ }
+ }
+
+ .cptx-email-loading-text-line{
+ background-color: #cbd4dc;
+ border-radius: 2px;
+ height: 7px;
+ margin: 5px 0;
+ width: 100%;
+ @extend .animated-background;
+ }
+}
+
+@keyframes placeHolderShimmer{
+ 0%{
+ background-position: -468px 0
+ }
+ 100%{
+ background-position: 468px 0
+ }
+}
+
+.animated-background {
+ animation-duration: 1.25s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: placeHolderShimmer;
+ animation-timing-function: linear;
+ position: relative;
+}
+
+@mixin themable($_THEME, $_BACKGROUND_COLOR_EMAIL, $_BORDER_COLOR_EMAIL, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT1, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT2, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT3){
+ [data-theme^=#{$_THEME}],
+ [data-theme] [data-theme^=#{$_THEME}] {
+ .cptx-email-loading-container{
+ background-color: $_BACKGROUND_COLOR_EMAIL;
+ border-color: $_BORDER_COLOR_EMAIL;
+ }
+
+ .animated-background{
+ background: linear-gradient(to right, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT1 8%, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT2 18%, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT3 33%);
+ background-size: 800px 104px;
+ }
+ }
+}
+@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_EMAIL_LIGHT, $_BORDER_COLOR_EMAIL_LIGHT, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT1_LIGHT, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT2_LIGHT, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT3_LIGHT);
+@include themable($_THEME_DARK, $_BACKGROUND_COLOR_EMAIL_DARK, $_BORDER_COLOR_EMAIL_DARK, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT1_DARK, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT2_DARK, $_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT3_DARK);
\ No newline at end of file
diff --git a/email_mailbox/src/styles/index.scss b/email_mailbox/src/styles/index.scss
index 0d4122285..8c2bda5c0 100644
--- a/email_mailbox/src/styles/index.scss
+++ b/email_mailbox/src/styles/index.scss
@@ -52,6 +52,9 @@ $_BACKGROUND_COLOR_THREAD_ITEM_EMAILS_SIZE_LIGHT: #cecece;
$_BACKGROUND_COLOR_THREAD_ITEM_BUTTON_OPTION_LIGHT: #f7f7f8;
$_BACKGROUND_COLOR_THREAD_ITEM_LABELS_LIGHT: #e5e5e6;
$_BACKGROUND_COLOR_EMAIL_LIGHT: white;
+$_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT1_LIGHT: #e3ebf3;
+$_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT2_LIGHT: #ecf2f8;
+$_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT3_LIGHT: #dee7f0;
$_BACKGROUND_COLOR_EMAIL_BUTTON_SEGMENT_LIGHT: white;
$_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_LIGHT: #f3f3f3;
$_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_HOVER_LIGHT: #e9eaeb;
@@ -161,6 +164,9 @@ $_BACKGROUND_COLOR_THREAD_ITEM_EMAILS_SIZE_DARK: #4b4b4b;
$_BACKGROUND_COLOR_THREAD_ITEM_BUTTON_OPTION_DARK: #1f2228;
$_BACKGROUND_COLOR_THREAD_ITEM_LABELS_DARK: #5a5c66;
$_BACKGROUND_COLOR_EMAIL_DARK: #34363c;
+$_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT1_DARK: #45484d;
+$_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT2_DARK: #4e5055;
+$_BACKGROUND_COLOR_EMAIL_LOADING_GRADIENT3_DARK: #42454a;
$_BACKGROUND_COLOR_EMAIL_BUTTON_SEGMENT_DARK: #34363c;
$_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_DARK: #535762;
$_BACKGROUND_COLOR_EMAIL_DOTS_COLLAPSED_HOVER_DARK: #656a78;