Commit 73963894 authored by MrMan's avatar MrMan

Use subpage routing to prevent flicker

parent 7b12e9ca
......@@ -5,42 +5,39 @@ import MainLayout from "./components/main-layout";
import WithRouteTriggeredLoader from "./components/with-route-triggered-loader";
import InboxMail from "./components/inbox-mail";
let StarredMail;
// Set up the app
m.route(document.body, "/inbox", {
"/inbox": {
render: function() {
return m(MainLayout, m(WithRouteTriggeredLoader, {
title: "Loading inbox...",
// This function provides the data
loadFn: function() { return EmailSvc.getEmails(); },
// This function provides the component to WithRouteTriggeredLoader
childFn: function(data) { return m(InboxMail, {emails: data}); }
}));
}
},
"/starred": {
onmatch: function() {
// Load starred mail *when we need it*
return import("./components/starred-mail")
.then((mod) => StarredMail = mod.default);
},
},
"/draft": {
onmatch: function() {
return import("./components/draft-mail")
.then(({default: DraftMail}) => DraftMail);
}
},
"/important": {
onmatch: function() {
return import("./components/important-mail")
.then(({default: ImportantMail}) => ImportantMail);
"/:subpage": {
onmatch: function(args) {
// NOTE: Using onmatch for code split functionality *and* using `render` for the main inbox route doesn't work (flickers result)
// this is the best way to get clean /inbox, /starred, etc routes, without excessive re-rendering/flicker
switch(args.subpage) {
case "starred":
return import("./components/starred-mail")
.then(({default: StarredMail}) => StarredMail);
case "important":
return import("./components/important-mail")
.then(({default: ImportantMail}) => ImportantMail);
case "draft":
return import("./components/draft-mail")
.then(({default: DraftMail}) => DraftMail);
case "inbox":
default:
return {
view: () => m(MainLayout, m(WithRouteTriggeredLoader, {
title: "Loading inbox...",
// This function provides the data
loadFn: function() { return EmailSvc.getEmails(); },
// This function provides the component to WithRouteTriggeredLoader
childFn: function(data) { return m(InboxMail, {emails: data}); }
}))
};
}
}
},
......
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