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.

js/admin/src/components/AppearancePage.js

@@ -1,10 +1,10 @@
-import Component from 'flarum/Component';
+import Page from 'flarum/components/Page';
 import Button from 'flarum/components/Button';
 import Switch from 'flarum/components/Switch';
 import EditCustomCssModal from 'flarum/components/EditCustomCssModal';
 import saveSettings from 'flarum/utils/saveSettings';
 
-export default class AppearancePage extends Component {
+export default class AppearancePage extends Page {
   init() {
     this.primaryColor = m.prop(app.settings.theme_primary_color);
     this.secondaryColor = m.prop(app.settings.theme_secondary_color);

js/admin/src/components/BasicsPage.js

@@ -1,4 +1,4 @@
-import Component from 'flarum/Component';
+import Page from 'flarum/components/Page';
 import FieldSet from 'flarum/components/FieldSet';
 import Select from 'flarum/components/Select';
 import Button from 'flarum/components/Button';
@@ -6,7 +6,7 @@ import Alert from 'flarum/components/Alert';
 import saveSettings from 'flarum/utils/saveSettings';
 import ItemList from 'flarum/utils/ItemList';
 
-export default class BasicsPage extends Component {
+export default class BasicsPage extends Page {
   init() {
     this.loading = false;
 

js/admin/src/components/DashboardPage.js

@@ -1,6 +1,6 @@
-import Component from 'flarum/Component';
+import Page from 'flarum/components/Page';
 
-export default class DashboardPage extends Component {
+export default class DashboardPage extends Page {
   view() {
     return (
       <div className="DashboardPage">

js/admin/src/components/ExtensionsPage.js

@@ -1,4 +1,4 @@
-import Component from 'flarum/Component';
+import Page from 'flarum/components/Page';
 import LinkButton from 'flarum/components/LinkButton';
 import Button from 'flarum/components/Button';
 import Dropdown from 'flarum/components/Dropdown';
@@ -9,7 +9,7 @@ import ItemList from 'flarum/utils/ItemList';
 import icon from 'flarum/helpers/icon';
 import listItems from 'flarum/helpers/listItems';
 
-export default class ExtensionsPage extends Component {
+export default class ExtensionsPage extends Page {
   view() {
 
     return (

js/admin/src/components/Page.js

@@ -0,0 +1,32 @@
+import Component from 'flarum/Component';
+
+/**
+ * The `Page` component
+ *
+ * @abstract
+ */
+export default class Page extends Component {
+  init() {
+    app.previous = app.current;
+    app.current = this;
+
+    app.modal.close();
+
+    /**
+     * A class name to apply to the body while the route is active.
+     *
+     * @type {String}
+     */
+    this.bodyClass = '';
+  }
+
+  config(isInitialized, context) {
+    if (isInitialized) return;
+
+    if (this.bodyClass) {
+      $('#app').addClass(this.bodyClass);
+
+      context.onunload = () => $('#app').removeClass(this.bodyClass);
+    }
+  }
+}

js/admin/src/components/PermissionsPage.js

@@ -1,11 +1,11 @@
-import Component from 'flarum/Component';
+import Page from 'flarum/components/Page';
 import GroupBadge from 'flarum/components/GroupBadge';
 import EditGroupModal from 'flarum/components/EditGroupModal';
 import Group from 'flarum/models/Group';
 import icon from 'flarum/helpers/icon';
 import PermissionGrid from 'flarum/components/PermissionGrid';
 
-export default class PermissionsPage extends Component {
+export default class PermissionsPage extends Page {
   view() {
     return (
       <div className="PermissionsPage">