Make prefs load at launch but lazy-load tabs

app/internal_packages/composer-signature/lib/main.es6

@@ -2,13 +2,12 @@ import {PreferencesUIStore, ExtensionRegistry, ComponentRegistry} from 'nylas-ex
 
 import SignatureComposerExtension from './signature-composer-extension';
 import SignatureComposerDropdown from './signature-composer-dropdown';
-import PreferencesSignatures from "./preferences-signatures";
 
 export function activate() {
   this.preferencesTab = new PreferencesUIStore.TabItem({
     tabId: "Signatures",
     displayName: "Signatures",
-    component: PreferencesSignatures,
+    componentClassFn: () => require('./preferences-signatures').default, // eslint-disable-line
   });
 
   ExtensionRegistry.Composer.register(SignatureComposerExtension);

app/internal_packages/composer-signature/lib/signature-composer-dropdown.jsx

@@ -96,8 +96,8 @@ export default class SignatureComposerDropdown extends React.Component {
   }
 
   _renderSignatures() {
-    const header = [<div className="item item-none" key="none" onMouseDown={this._onClickNoSignature}><span>No signature</span></div>]
-    const footer = [<div className="item item-edit" key="edit" onMouseDown={this._onClickEditSignatures}><span>Edit Signatures...</span></div>]
+    const header = [<div className="item item-none" key="none" onClick={this._onClickNoSignature}><span>No signature</span></div>]
+    const footer = [<div className="item item-edit" key="edit" onClick={this._onClickEditSignatures}><span>Edit Signatures...</span></div>]
 
     const sigItems = Object.values(this.state.signatures)
     return (

app/internal_packages/composer-templates/lib/main.es6

@@ -9,7 +9,7 @@ export function activate(state = {}) {
   this.preferencesTab = new PreferencesUIStore.TabItem({
     tabId: 'Quick Replies',
     displayName: 'Quick Replies',
-    component: require('./preferences-templates').default,
+    componentClassFn: () => require('./preferences-templates').default,
   });
   ComponentRegistry.register(TemplatePicker, {role: 'Composer:ActionButton'});
   ComponentRegistry.register(TemplateStatusBar, {role: 'Composer:Footer'});

app/internal_packages/composer-templates/lib/template-picker.jsx

@@ -80,8 +80,8 @@ class TemplatePopover extends React.Component {
     ];
 
     const footerComponents = [
-      <div className="item" key="new" onMouseDown={this._onNewTemplate}>Save Draft as Template...</div>,
-      <div className="item" key="manage" onMouseDown={this._onManageTemplates}>Manage Templates...</div>,
+      <div className="item" key="new" onClick={this._onNewTemplate}>Save Draft as Template...</div>,
+      <div className="item" key="manage" onClick={this._onManageTemplates}>Manage Templates...</div>,
     ];
 
     return (

app/internal_packages/preferences/lib/main.jsx

@@ -1,50 +1,47 @@
-import {PreferencesUIStore,
+/* eslint global-require: 0 */
+import {
+  PreferencesUIStore,
   WorkspaceStore,
-  ComponentRegistry} from 'nylas-exports';
+  ComponentRegistry,
+} from 'nylas-exports';
 
 import PreferencesRoot from './preferences-root';
-import PreferencesGeneral from './tabs/preferences-general';
-import PreferencesAccounts from './tabs/preferences-accounts';
-import PreferencesAppearance from './tabs/preferences-appearance';
-import PreferencesKeymaps from './tabs/preferences-keymaps';
-import PreferencesMailRules from './tabs/preferences-mail-rules';
-import PreferencesIdentity from './tabs/preferences-identity';
 
 export function activate() {
   PreferencesUIStore.registerPreferencesTab(new PreferencesUIStore.TabItem({
     tabId: 'General',
     displayName: 'General',
-    component: PreferencesGeneral,
+    componentClassFn: () => require('./tabs/preferences-general').default,
     order: 1,
   }))
   PreferencesUIStore.registerPreferencesTab(new PreferencesUIStore.TabItem({
     tabId: 'Accounts',
     displayName: 'Accounts',
-    component: PreferencesAccounts,
+    componentClassFn: () => require('./tabs/preferences-accounts').default,
     order: 2,
   }))
   PreferencesUIStore.registerPreferencesTab(new PreferencesUIStore.TabItem({
     tabId: 'Subscription',
     displayName: 'Subscription',
-    component: PreferencesIdentity,
+    componentClassFn: () => require('./tabs/preferences-identity').default,
     order: 3,
   }))
   PreferencesUIStore.registerPreferencesTab(new PreferencesUIStore.TabItem({
     tabId: 'Appearance',
     displayName: 'Appearance',
-    component: PreferencesAppearance,
+    componentClassFn: () => require('./tabs/preferences-appearance').default,
     order: 4,
   }))
   PreferencesUIStore.registerPreferencesTab(new PreferencesUIStore.TabItem({
     tabId: 'Shortcuts',
     displayName: 'Shortcuts',
-    component: PreferencesKeymaps,
+    componentClassFn: () => require('./tabs/preferences-keymaps').default,
     order: 5,
   }))
   PreferencesUIStore.registerPreferencesTab(new PreferencesUIStore.TabItem({
     tabId: 'Mail Rules',
     displayName: 'Mail Rules',
-    component: PreferencesMailRules,
+    componentClassFn: () => require('./tabs/preferences-mail-rules').default,
     order: 6,
   }))
 

app/internal_packages/preferences/lib/preferences-root.jsx

@@ -77,6 +77,7 @@ class PreferencesRoot extends React.Component {
 
   render() {
     const {tab, selection, tabs} = this.props
+    const TabComponent = tab && tab.componentClassFn();
 
     return (
       <KeyCommandsRegion className="preferences-wrap" tabIndex="1" localHandlers={this._localHandlers()}>
@@ -88,7 +89,7 @@ class PreferencesRoot extends React.Component {
           <ScrollRegion className="preferences-content">
             <ConfigPropContainer ref={(el) => { this._contentComponent = el; }}>
               {tab ?
-                <tab.component accountId={selection.accountId} /> :
+                <TabComponent accountId={selection.accountId} /> :
                 false
               }
             </ConfigPropContainer>

app/internal_packages/preferences/lib/tabs/preferences-keymaps.jsx

@@ -7,8 +7,7 @@ import { Flexbox } from 'nylas-component-kit';
 import displayedKeybindings from './keymaps/displayed-keybindings';
 import CommandItem from './keymaps/command-item';
 
-class PreferencesKeymaps extends React.Component {
-
+export default class PreferencesKeymaps extends React.Component {
   static displayName = 'PreferencesKeymaps';
 
   static propTypes = {
@@ -135,7 +134,4 @@ class PreferencesKeymaps extends React.Component {
       </div>
     );
   }
-
 }
-
-export default PreferencesKeymaps;

app/internal_packages/preferences/lib/tabs/preferences-mail-rules.jsx

@@ -158,7 +158,7 @@ class PreferencesMailRules extends React.Component {
             mode={RetinaImg.Mode.ContentDark}
           />
           <h2>No rules</h2>
-          <button className="btn btn-small" onMouseDown={this._onAddRule}>
+          <button className="btn btn-small" onClick={this._onAddRule}>
             Create a new rule
           </button>
         </div>

app/internal_packages/preferences/package.json

@@ -4,6 +4,7 @@
   "main": "./lib/main",
   "description": "Nylas Preferences Window Component",
   "license": "GPL-3.0",
+  "syncInit": true,
   "private": true,
   "engines": {
     "merani": "*"

app/internal_packages_disabled/plugins/lib/main.jsx

@@ -5,7 +5,7 @@ export function activate() {
   this.preferencesTab = new PreferencesUIStore.TabItem({
     tabId: "Plugins",
     displayName: "Plugins",
-    component: PluginsView,
+    componentClassFn: () => PluginsView,
   });
 
   PreferencesUIStore.registerPreferencesTab(this.preferencesTab);

app/src/flux/stores/draft-editing-session.es6

@@ -236,10 +236,10 @@ export default class DraftEditingSession extends NylasStore {
   //
   // If the account is updated it makes a request to delete the draft with the
   // old accountId
-  ensureCorrectAccount({noSyncback} = {}) {
+  async ensureCorrectAccount({noSyncback} = {}) {
     const account = AccountStore.accountForEmail(this._draft.from[0].email);
     if (!account) {
-      return Promise.reject(new Error("DraftEditingSession::ensureCorrectAccount - you can only send drafts from a configured account."))
+      throw new Error("DraftEditingSession::ensureCorrectAccount - you can only send drafts from a configured account.");
     }
 
     if (account.id !== this._draft.accountId) {
@@ -251,12 +251,13 @@ export default class DraftEditingSession extends NylasStore {
         threadId: null,
         replyToMessageId: null,
       });
-      return this.changes.commit({noSyncback}).thenReturn(this);
+      await this.changes.commit({noSyncback});
     }
-    return Promise.resolve(this);
+
+    return this;
   }
 
-  _setDraft(draft) {
+  async _setDraft(draft) {
     if (draft.body === undefined) {
       throw new Error("DraftEditingSession._setDraft - new draft has no body!");
     }
@@ -269,28 +270,27 @@ export default class DraftEditingSession extends NylasStore {
     fragment.appendChild(draftBodyRootNode);
     draftBodyRootNode.innerHTML = draft.body;
 
-    return Promise.each(extensions, (ext) => {
+    for (const ext of extensions) {
       if (ext.applyTransformsForSending && ext.unapplyTransformsForSending) {
-        Promise.resolve(ext.unapplyTransformsForSending({
+        await ext.unapplyTransformsForSending({
           draftBodyRootNode: draftBodyRootNode,
           draft: draft,
-        }));
+        });
       }
-    }).then(() => {
-      draft.body = draftBodyRootNode.innerHTML;
-      this._draft = draft;
+    }
+    draft.body = draftBodyRootNode.innerHTML;
+    this._draft = draft;
 
-      // We keep track of the draft's initial body if it's pristine when the editing
-      // session begins. This initial value powers things like "are you sure you want
-      // to send with an empty body?"
-      if (draft.pristine) {
-        this._draftPristineBody = draft.body;
-        this._undoStack.save(this._snapshot());
-      }
+    // We keep track of the draft's initial body if it's pristine when the editing
+    // session begins. This initial value powers things like "are you sure you want
+    // to send with an empty body?"
+    if (draft.pristine) {
+      this._draftPristineBody = draft.body;
+      this._undoStack.save(this._snapshot());
+    }
 
-      this.trigger();
-      return Promise.resolve(this);
-    });
+    this.trigger();
+    return this;
   }
 
   _onDraftChanged = (change) => {

app/src/flux/tasks/reprocess-mail-rules-task.es6

@@ -32,8 +32,9 @@ export default class ReprocessMailRulesTask extends Task {
 
   // TODO BG WHAT?
 
-  performRemote() {
-    return Promise.fromCallback(this._processAllMessages).thenReturn(Task.Status.Success);
+  async performRemote() {
+    await Promise.fromCallback(this._processAllMessages)
+    return Task.Status.Success;
   }
 
   _processAllMessages = (callback) => {