Dramatically improve performance when typing in a modal

Since Mithril doesn't really offer granular redraw control, typing in a text input on a modal would trigger a redraw for the whole page (including the page content behind the modal) on every keystroke. This commit allows components to be "paused" so that their vdom subtree will be retained instead of reconstructed on subsequent redraws. When a modal is opened, we pause the main page component, and when it's closed, we unpause it. This means that while a modal is visible, only the content inside of the modal will be redrawn, dramatically improving performance.
This commit is contained in:
Toby Zerner
2016-03-11 13:18:16 +10:30
parent e37c7a9b06
commit d1c436c4d5
10 changed files with 177 additions and 48 deletions

View File

@ -46,6 +46,8 @@ export default class ModalManager extends Component {
this.showing = true;
this.component = component;
app.current.retain = true;
m.redraw(true);
this.$().modal({backdrop: this.component.isDismissible() ? true : 'static'}).modal('show');
@ -83,6 +85,8 @@ export default class ModalManager extends Component {
this.component = null;
app.current.retain = false;
m.lazyRedraw();
}