Commit 90d19226 authored by MrMan's avatar MrMan

Merge branch 'add-pretend-async-loading'

parents e4626e25 ca6c1d89
......@@ -6,7 +6,6 @@ var LHS_NAV_ITEMS = [
iconImgSrc: "static/images/icons/inbox-white.svg",
badgeCSSBgColor: "#2285c6",
badgeContent: 2,
selected: true,
route: "/inbox",
},
......@@ -213,6 +212,17 @@ EmailService.prototype.oneOrMoreEmailsChecked = function(opts) {
return this._allEmailsChecked || Object.keys(this.checkedEmailIds).length > 0;
};
EmailService.prototype.getEmails = function() {
var randomWaitMs = Math.floor(Math.random() * 10) * 1000;
return new Promise(function(resolve, reject) {
// After some random wait, return the global EMAILS we've always used
setTimeout(function() {
resolve(EMAILS);
}, randomWaitMs);
});
};
var EMAIL_SVC = new EmailService();
////////////////////
......@@ -314,7 +324,13 @@ var NavItemListing = {
var LHSNavPageList = {
view: function() {
var navItems = LHS_NAV_ITEMS;
// Mark the nav items with the correct selected property
var currentPath = m.route.get();
var navItems = LHS_NAV_ITEMS.map(function(item) {
item.selected = currentPath === item.route;
return item;
});
return m(NavItemListing, {items: navItems});
}
};
......@@ -524,10 +540,38 @@ var MailPageSubNav = {
},
};
var LoadingIndicator = {
view: function(vnode) {
var title = vnode.attrs.title || "Loading...";
return m(".component.loading-indicator", [
m("img.icon.loading-icon", {src: "static/images/icons/loader.svg"}),
m(".title", title),
]);
},
};
var InboxRHS = {
oninit: function() {
this.emailsLoaded = false;
EMAIL_SVC
.getEmails()
.then(emails => {
this.emails = emails;
this.emailsLoaded = true;
m.redraw(); // would love to only subtree render here...
});
},
view: function(vnode) {
var newCount = vnode.attrs.newCount;
var listing = m(LoadingIndicator, {title: "Loading your emails..."});
if (this.emailsLoaded) {
listing = m(EmailList, {emails: this.emails});
}
return m(".component.inbox-rhs", [
// Colored header
m(RHSHeader, {class: "inbox-blue-bg white-fg", title: "Inbox", newCount: newCount}),
......@@ -536,7 +580,7 @@ var InboxRHS = {
m(MailPageSubNav),
// EmailList
m(EmailList, {emails: EMAILS}),
listing,
]);
}
};
......
......@@ -273,3 +273,33 @@ img.icon-lg { height: 2em; }
padding-right: 1em;
justify-content: space-between;
}
/********************/
/* LoadingIndicator */
/********************/
.component.loading-indicator {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: top;
padding-top: 30vh;
color: #999;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.component.loading-indicator .icon.loading-icon {
font-size: 6em;
animation: 2s spin infinite;
}
.component.loading-indicator .title {
font-size: 3em;
}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment