using dynamic import for dialogs and widgets to speed up initial load

src/public/javascripts/desktop.js

@@ -1,17 +1,3 @@
-import addLinkDialog from './dialogs/add_link.js';
-import jumpToNoteDialog from './dialogs/jump_to_note.js';
-import attributesDialog from './dialogs/attributes.js';
-import noteRevisionsDialog from './dialogs/note_revisions.js';
-import noteSourceDialog from './dialogs/note_source.js';
-import recentChangesDialog from './dialogs/recent_changes.js';
-import optionsDialog from './dialogs/options.js';
-import sqlConsoleDialog from './dialogs/sql_console.js';
-import markdownImportDialog from './dialogs/markdown_import.js';
-import exportDialog from './dialogs/export.js';
-import importDialog from './dialogs/import.js';
-import protectedSessionDialog from './dialogs/protected_session.js';
-import linkMapDialog from './dialogs/link_map.js';
-
 import cloning from './services/cloning.js';
 import contextMenu from './services/tree_context_menu.js';
 import dragAndDropSetup from './services/drag_and_drop.js';
@@ -50,7 +36,7 @@ window.glob.isMobile = utils.isMobile;
 // required for CKEditor image upload plugin
 window.glob.getActiveNode = treeService.getActiveNode;
 window.glob.getHeaders = server.getHeaders;
-window.glob.showAddLinkDialog = addLinkDialog.showDialog;
+window.glob.showAddLinkDialog = () => import('./dialogs/add_link.js').then(d => d.showDialog());
 // this is required by CKEditor when uploading images
 window.glob.noteChanged = noteDetailService.noteChanged;
 window.glob.refreshTree = treeService.reload;

src/public/javascripts/dialogs/about.js

@@ -9,7 +9,7 @@ const $buildDate = $("#build-date");
 const $buildRevision = $("#build-revision");
 const $dataDirectory = $("#data-directory");
 
-async function showDialog() {
+export async function showDialog() {
     utils.closeActiveDialog();
 
     const appInfo = await server.get('app-info');
@@ -25,8 +25,4 @@ async function showDialog() {
     glob.activeDialog = $dialog;
 
     $dialog.modal();
-}
-
-export default {
-    showDialog
 }

src/public/javascripts/dialogs/add_link.js

@@ -24,11 +24,11 @@ function setLinkType(linkType) {
     linkTypeChanged();
 }
 
-async function showDialogForClone() {
+export async function showDialogForClone() {
     showDialog('selected-to-active');
 }
 
-async function showDialog(linkType) {
+export async function showDialog(linkType) {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
@@ -147,8 +147,3 @@ function linkTypeChanged() {
 }
 
 $linkTypes.change(linkTypeChanged);
-
-export default {
-    showDialog,
-    showDialogForClone
-};

src/public/javascripts/dialogs/attributes.js

@@ -254,7 +254,7 @@ function AttributesModel() {
     }
 }
 
-async function showDialog() {
+export async function showDialog() {
     utils.closeActiveDialog();
 
     // lazily apply bindings on first use
@@ -285,8 +285,4 @@ $dialog.on('focus', '.label-value', function (e) {
         $el: $(this),
         open: true
     })
-});
-
-export default {
-    showDialog
-};
+});

src/public/javascripts/dialogs/branch_prefix.js

@@ -12,7 +12,7 @@ const $noteTitle = $('#branch-prefix-note-title');
 
 let branchId;
 
-async function showDialog(node) {
+export async function showDialog(node) {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
@@ -47,8 +47,4 @@ $form.submit(() => {
     return false;
 });
 
-$dialog.on('shown.bs.modal', () => $treePrefixInput.focus());
-
-export default {
-    showDialog
-};
+$dialog.on('shown.bs.modal', () => $treePrefixInput.focus());

src/public/javascripts/dialogs/confirm.js

@@ -9,7 +9,7 @@ const DELETE_NOTE_BUTTON_ID = "confirm-dialog-delete-note";
 let resolve;
 let $originallyFocused; // element focused before the dialog was opened so we can return to it afterwards
 
-function confirm(message) {
+export function confirm(message) {
     $originallyFocused = $(':focus');
 
     $custom.hide();
@@ -27,7 +27,7 @@ function confirm(message) {
     return new Promise((res, rej) => { resolve = res; });
 }
 
-function confirmDeleteNoteBoxWithNote(title) {
+export function confirmDeleteNoteBoxWithNote(title) {
     glob.activeDialog = $dialog;
 
     $confirmContent.text(`Are you sure you want to remove the note "${title}" from relation map?`);
@@ -52,7 +52,7 @@ function confirmDeleteNoteBoxWithNote(title) {
     return new Promise((res, rej) => { resolve = res; });
 }
 
-function isDeleteNoteChecked() {
+export function isDeleteNoteChecked() {
     return $("#" + DELETE_NOTE_BUTTON_ID + ":checked").length > 0;
 }
 
@@ -77,10 +77,4 @@ function doResolve(ret) {
 }
 
 $cancelButton.click(() => doResolve(false));
-$okButton.click(() => doResolve(true));
-
-export default {
-    confirm,
-    confirmDeleteNoteBoxWithNote,
-    isDeleteNoteChecked
-}
+$okButton.click(() => doResolve(true));

src/public/javascripts/dialogs/event_log.js

@@ -5,7 +5,7 @@ import server from '../services/server.js';
 const $dialog = $("#event-log-dialog");
 const $list = $("#event-log-list");
 
-async function showDialog() {
+export async function showDialog() {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
@@ -29,8 +29,4 @@ async function showDialog() {
 
         $list.append(eventEl);
     }
-}
-
-export default {
-    showDialog
-};
+}

src/public/javascripts/dialogs/export.js

@@ -18,7 +18,7 @@ const $opmlVersions = $("#opml-versions");
 let exportId = '';
 let branchId = null;
 
-async function showDialog(node, defaultType) {
+export async function showDialog(node, defaultType) {
     utils.closeActiveDialog();
 
     // each opening of the dialog resets the exportId so we don't associate it with previous exports anymore
@@ -134,8 +134,4 @@ messagingService.subscribeToMessages(async message => {
 
         infoService.showMessage("Export finished successfully.");
     }
-});
-
-export default {
-    showDialog
-};
+});

src/public/javascripts/dialogs/help.js

@@ -2,14 +2,10 @@ import utils from "../services/utils.js";
 
 const $dialog = $("#help-dialog");
 
-async function showDialog() {
+export async function showDialog() {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
 
     $dialog.modal();
-}
-
-export default {
-    showDialog
 }

src/public/javascripts/dialogs/import.js

@@ -21,7 +21,7 @@ const $explodeArchivesCheckbox = $("#explode-archives-checkbox");
 let importId;
 let importIntoNoteId = null;
 
-async function showDialog(node) {
+export async function showDialog(node) {
     utils.closeActiveDialog();
 
     // each opening of the dialog resets the importId so we don't associate it with previous imports anymore
@@ -74,7 +74,7 @@ async function importIntoNote(importNoteId) {
     $dialog.modal('hide');
 }
 
-async function uploadFiles(importNoteId, files, options) {
+export async function uploadFiles(importNoteId, files, options) {
     if (files.length === 0) {
         return;
     }
@@ -144,8 +144,3 @@ $fileUploadInput.change(() => {
         $importButton.attr("disabled", "disabled");
     }
 });
-
-export default {
-    showDialog,
-    uploadFiles
-}

src/public/javascripts/dialogs/info.js

@@ -7,7 +7,7 @@ const $okButton = $("#info-dialog-ok-button");
 let resolve;
 let $originallyFocused; // element focused before the dialog was opened so we can return to it afterwards
 
-function info(message) {
+export function info(message) {
     $originallyFocused = $(':focus');
 
     utils.closeActiveDialog();
@@ -34,8 +34,4 @@ $dialog.on("hidden.bs.modal", () => {
     }
 });
 
-$okButton.click(() => $dialog.modal("hide"));
-
-export default {
-    info
-}
+$okButton.click(() => $dialog.modal("hide"));

src/public/javascripts/dialogs/jump_to_note.js

@@ -7,7 +7,7 @@ const $dialog = $("#jump-to-note-dialog");
 const $autoComplete = $("#jump-to-note-autocomplete");
 const $showInFullTextButton = $("#show-in-full-text-button");
 
-async function showDialog() {
+export async function showDialog() {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
@@ -46,7 +46,3 @@ function showInFullText(e) {
 $showInFullTextButton.click(showInFullText);
 
 utils.bindElShortcut($dialog, 'ctrl+return', showInFullText);
-
-export default {
-    showDialog
-};

src/public/javascripts/dialogs/link_map.js

@@ -26,7 +26,7 @@ let jsPlumbInstance = null;
 let pzInstance = null;
 let renderer = null;
 
-async function showDialog() {
+export async function showDialog() {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
@@ -216,7 +216,3 @@ function noteIdToId(noteId) {
 $(".link-map-settings").change(loadNotesAndRelations);
 
 $maxNotesInput.on("input", loadNotesAndRelations);
-
-export default {
-    showDialog
-};

src/public/javascripts/dialogs/markdown_import.js

@@ -25,7 +25,7 @@ async function convertMarkdownToHtml(text) {
     infoService.showMessage("Markdown content has been imported into the document.");
 }
 
-async function importMarkdownInline() {
+export async function importMarkdownInline() {
     if (utils.isElectron()) {
         const {clipboard} = require('electron');
         const text = clipboard.readText();
@@ -56,8 +56,4 @@ $importButton.click(sendForm);
 utils.bindElShortcut($dialog, 'ctrl+return', sendForm);
 
 // for CKEditor integration (button on block toolbar)
-window.glob.importMarkdownInline = importMarkdownInline;
-
-export default {
-    importMarkdownInline
-};
+window.glob.importMarkdownInline = importMarkdownInline;

src/public/javascripts/dialogs/note_info.js

@@ -9,7 +9,7 @@ const $type = $("#note-info-type");
 const $mime = $("#note-info-mime");
 const $okButton = $("#note-info-ok-button");
 
-function showDialog() {
+export function showDialog() {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
@@ -26,7 +26,3 @@ function showDialog() {
 }
 
 $okButton.click(() => $dialog.modal('hide'));
-
-export default {
-    showDialog
-};

src/public/javascripts/dialogs/note_revisions.js

@@ -14,7 +14,7 @@ async function showCurrentNoteRevisions() {
     await showNoteRevisionsDialog(noteDetailService.getActiveNoteId());
 }
 
-async function showNoteRevisionsDialog(noteId, noteRevisionId) {
+export async function showNoteRevisionsDialog(noteId, noteRevisionId) {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
@@ -73,7 +73,3 @@ $(document).on('click', "a[data-action='note-revision']", event => {
 
     return false;
 });
-
-export default {
-    showCurrentNoteRevisions
-};

src/public/javascripts/dialogs/note_source.js

@@ -4,7 +4,7 @@ import utils from "../services/utils.js";
 const $dialog = $("#note-source-dialog");
 const $noteSource = $("#note-source");
 
-function showDialog() {
+export function showDialog() {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
@@ -41,8 +41,4 @@ function formatNode(node, level) {
     }
 
     return node;
-}
-
-export default {
-    showDialog
-};
+}

src/public/javascripts/dialogs/options.js

@@ -16,7 +16,7 @@ function addTabHandler(handler) {
     tabHandlers.push(handler);
 }
 
-async function showDialog() {
+export async function showDialog() {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
@@ -38,11 +38,6 @@ async function saveOptions(options) {
     infoService.showMessage("Options change have been saved.");
 }
 
-export default {
-    showDialog,
-    saveOptions
-};
-
 addTabHandler((function() {
     const $themeSelect = $("#theme-select");
     const $zoomFactorSelect = $("#zoom-factor-select");

src/public/javascripts/dialogs/prompt.js

@@ -11,7 +11,7 @@ const $form = $("#prompt-dialog-form");
 let resolve;
 let shownCb;
 
-function ask({ message, defaultValue, shown }) {
+export function ask({ message, defaultValue, shown }) {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
@@ -58,7 +58,3 @@ $form.submit(() => {
 
     $dialog.modal('hide');
 });
-
-export default {
-    ask
-}

src/public/javascripts/dialogs/protected_session.js

@@ -4,13 +4,13 @@ const $dialog = $("#protected-session-password-dialog");
 const $passwordForm = $dialog.find(".protected-session-password-form");
 const $passwordInput = $dialog.find(".protected-session-password");
 
-function show() {
+export function show() {
     $dialog.modal();
 
     $passwordInput.focus();
 }
 
-function close() {
+export function close() {
     // this may fal if the dialog has not been previously opened (not sure if still true with Bootstrap modal)
     try {
         $dialog.modal('hide');
@@ -26,8 +26,3 @@ $passwordForm.submit(() => {
 
     return false;
 });
-
-export default {
-    show,
-    close
-}

src/public/javascripts/dialogs/recent_changes.js

@@ -5,7 +5,7 @@ import server from '../services/server.js';
 const $dialog = $("#recent-changes-dialog");
 const $content = $("#recent-changes-content");
 
-async function showDialog() {
+export async function showDialog() {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
@@ -76,7 +76,3 @@ function groupByDate(result) {
     }
     return groupedByDate;
 }
-
-export default {
-    showDialog
-};

src/public/javascripts/dialogs/sql_console.js

@@ -14,7 +14,7 @@ let codeEditor;
 
 $dialog.on("shown.bs.modal", e => initEditor());
 
-async function showDialog() {
+export async function showDialog() {
     utils.closeActiveDialog();
 
     glob.activeDialog = $dialog;
@@ -130,7 +130,3 @@ async function showTables() {
 utils.bindElShortcut($query, 'ctrl+return', execute);
 
 $executeButton.click(execute);
-
-export default {
-    showDialog
-};

src/public/javascripts/services/branches.js

@@ -6,7 +6,6 @@ import treeCache from "./tree_cache.js";
 import treeUtils from "./tree_utils.js";
 import hoistedNoteService from "./hoisted_note.js";
 import noteDetailService from "./note_detail.js";
-import confirmDialog from "../dialogs/confirm.js";
 
 async function moveBeforeNode(nodesToMove, beforeNode) {
     nodesToMove = await filterRootNote(nodesToMove);
@@ -90,6 +89,8 @@ async function deleteNodes(nodes) {
     const nodeTitles = $("<ul>").append(...nodes.map(node => $("<li>").text(node.title)));
     const confirmText = $("<div>").text('This will delete the following notes and their sub-notes: ').append(nodeTitles);
 
+    const confirmDialog = await import('../dialogs/confirm.js');
+
     if (!await confirmDialog.confirm(confirmText)) {
         return false;
     }

src/public/javascripts/services/drag_and_drop.js

@@ -1,6 +1,5 @@
 import treeService from './tree.js';
 import treeChangesService from './branches.js';
-import importDialog from '../dialogs/import.js';
 
 const dragAndDropSetup = {
     autoExpandMS: 600,
@@ -25,10 +24,12 @@ const dragAndDropSetup = {
     },
     dragEnter: (node, data) => true, // allow drop on any node
     dragOver: (node, data) => true,
-    dragDrop: (node, data) => {
+    dragDrop: async (node, data) => {
         const dataTransfer = data.dataTransfer;
 
         if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
+            const importDialog = await import('../dialogs/import.js');
+
             importDialog.uploadFiles(node.data.noteId, dataTransfer.files, {
                 safeImport: true,
                 shrinkImages: true,

src/public/javascripts/services/entrypoints.js

@@ -1,21 +1,21 @@
 import utils from "./utils.js";
-import treeService from "./tree.js";
 import linkService from "./link.js";
 import zoomService from "./zoom.js";
-import noteRevisionsDialog from "../dialogs/note_revisions.js";
-import optionsDialog from "../dialogs/options.js";
-import addLinkDialog from "../dialogs/add_link.js";
-import jumpToNoteDialog from "../dialogs/jump_to_note.js";
-import noteSourceDialog from "../dialogs/note_source.js";
-import recentChangesDialog from "../dialogs/recent_changes.js";
-import sqlConsoleDialog from "../dialogs/sql_console.js";
-import searchNotesService from "./search_notes.js";
-import attributesDialog from "../dialogs/attributes.js";
-import helpDialog from "../dialogs/help.js";
-import noteInfoDialog from "../dialogs/note_info.js";
-import aboutDialog from "../dialogs/about.js";
-import linkMapDialog from "../dialogs/link_map.js";
 import protectedSessionService from "./protected_session.js";
+import searchNotesService from "./search_notes.js";
+
+const NOTE_REVISIONS = "../dialogs/note_revisions.js";
+const OPTIONS = "../dialogs/options.js";
+const ADD_LINK = "../dialogs/add_link.js";
+const JUMP_TO_NOTE = "../dialogs/jump_to_note.js";
+const NOTE_SOURCE = "../dialogs/note_source.js";
+const RECENT_CHANGES = "../dialogs/recent_changes.js";
+const SQL_CONSOLE = "../dialogs/sql_console.js";
+const ATTRIBUTES = "../dialogs/attributes.js";
+const HELP = "../dialogs/help.js";
+const NOTE_INFO = "../dialogs/note_info.js";
+const ABOUT = "../dialogs/about.js";
+const LINK_MAP = "../dialogs/link_map.js";
 
 function registerEntrypoints() {
     // hot keys are active also inside inputs and content editables
@@ -23,13 +23,13 @@ function registerEntrypoints() {
     jQuery.hotkeys.options.filterContentEditable = false;
     jQuery.hotkeys.options.filterTextInputs = false;
 
-    utils.bindGlobalShortcut('ctrl+l', addLinkDialog.showDialog);
-    utils.bindGlobalShortcut('ctrl+shift+l', addLinkDialog.showDialogForClone);
+    utils.bindGlobalShortcut('ctrl+l', () => import(ADD_LINK).then(d => d.showDialog()));
+    utils.bindGlobalShortcut('ctrl+shift+l', () => import(ADD_LINK).then(d => d.showDialogForClone()));
 
-    $("#jump-to-note-dialog-button").click(jumpToNoteDialog.showDialog);
-    utils.bindGlobalShortcut('ctrl+j', jumpToNoteDialog.showDialog);
+    $("#jump-to-note-dialog-button").click(() => import(JUMP_TO_NOTE).then(d => d.showDialog()));
+    utils.bindGlobalShortcut('ctrl+j', () => import(JUMP_TO_NOTE).then(d => d.showDialog()));
 
-    $("#recent-changes-button").click(recentChangesDialog.showDialog);
+    $("#recent-changes-button").click(() => import(RECENT_CHANGES).then(d => d.showDialog()));
 
     $("#enter-protected-session-button").click(protectedSessionService.enterProtectedSession);
     $("#leave-protected-session-button").click(protectedSessionService.leaveProtectedSession);
@@ -38,17 +38,17 @@ function registerEntrypoints() {
     utils.bindGlobalShortcut('ctrl+s', searchNotesService.toggleSearch);
 
     const $noteTabContainer = $("#note-tab-container");
-    $noteTabContainer.on("click", ".show-attributes-button", attributesDialog.showDialog);
-    utils.bindGlobalShortcut('alt+a', attributesDialog.showDialog);
+    $noteTabContainer.on("click", ".show-attributes-button", () => import(ATTRIBUTES).then(d => d.showDialog()));
+    utils.bindGlobalShortcut('alt+a', () => import(ATTRIBUTES).then(d => d.showDialog()));
 
-    $noteTabContainer.on("click", ".show-note-info-button", noteInfoDialog.showDialog);
+    $noteTabContainer.on("click", ".show-note-info-button", () => import(NOTE_INFO).then(d => d.showDialog()));
 
     $noteTabContainer.on("click", ".show-note-revisions-button", function() {
         if ($(this).hasClass("disabled")) {
             return;
         }
 
-        noteRevisionsDialog.showCurrentNoteRevisions();
+        import(NOTE_REVISIONS).then(d => d.showDialog());
     });
 
     $noteTabContainer.on("click", ".show-source-button", function() {
@@ -56,22 +56,26 @@ function registerEntrypoints() {
             return;
         }
 
-        noteSourceDialog.showDialog();
+        import(NOTE_SOURCE).then(d => {
+            console.log(d);
+
+            d.showDialog()
+        });
     });
 
     $noteTabContainer.on("click", ".show-link-map-button", function() {
-        linkMapDialog.showDialog();
+        import(LINK_MAP).then(d => d.showDialog());
     });
 
-    $("#options-button").click(optionsDialog.showDialog);
+    $("#options-button").click(() => import(OPTIONS).then(d => d.showDialog()));
 
-    $("#show-help-button").click(helpDialog.showDialog);
-    utils.bindGlobalShortcut('f1', helpDialog.showDialog);
+    $("#show-help-button").click(() => import(HELP).then(d => d.showDialog()));
+    utils.bindGlobalShortcut('f1', () => import(HELP).then(d => d.showDialog()));
 
-    $("#open-sql-console-button").click(sqlConsoleDialog.showDialog);
-    utils.bindGlobalShortcut('alt+o', sqlConsoleDialog.showDialog);
+    $("#open-sql-console-button").click(() => import(SQL_CONSOLE).then(d => d.showDialog()));
+    utils.bindGlobalShortcut('alt+o', () => import(SQL_CONSOLE).then(d => d.showDialog()));
 
-    $("#show-about-dialog-button").click(aboutDialog.showDialog);
+    $("#show-about-dialog-button").click(() => import(ABOUT).then(d => d.showDialog()));
 
     if (utils.isElectron()) {
         $("#history-navigation").show();

src/public/javascripts/services/note_detail.js

@@ -2,12 +2,10 @@ import treeService from './tree.js';
 import TabContext from './tab_context.js';
 import server from './server.js';
 import messagingService from "./messaging.js";
-import infoService from "./info.js";
 import treeCache from "./tree_cache.js";
 import NoteFull from "../entities/note_full.js";
 import bundleService from "./bundle.js";
 import utils from "./utils.js";
-import importDialog from "../dialogs/import.js";
 import contextMenuService from "./context_menu.js";
 import treeUtils from "./tree_utils.js";
 import tabRow from "./tab_row.js";
@@ -383,13 +381,14 @@ $tabContentsContainer.on("dragover", e => e.preventDefault());
 
 $tabContentsContainer.on("dragleave", e => e.preventDefault());
 
-$tabContentsContainer.on("drop", e => {
+$tabContentsContainer.on("drop", async e => {
     const activeNote = getActiveNote();
 
     if (!activeNote) {
         return;
     }
 
+    const importDialog = await import("../dialogs/import.js");
     importDialog.uploadFiles(activeNote.noteId, e.originalEvent.dataTransfer.files, {
         safeImport: true,
         shrinkImages: true,

src/public/javascripts/services/note_detail_relation_map.js

@@ -6,9 +6,6 @@ import treeService from "./tree.js";
 import contextMenuWidget from "./context_menu.js";
 import infoService from "./info.js";
 import attributeAutocompleteService from "./attribute_autocomplete.js";
-import promptDialog from "../dialogs/prompt.js";
-import infoDialog from "../dialogs/info.js";
-import confirmDialog from "../dialogs/confirm.js";
 
 const uniDirectionalOverlays = [
     [ "Arrow", {
@@ -125,6 +122,7 @@ class NoteDetailRelationMap {
         this.clipboard = null;
 
         this.$createChildNote.click(async () => {
+            const promptDialog = await import('"../dialogs/prompt.js"');
             const title = await promptDialog.ask({ message: "Enter title of new note",  defaultValue: "new note" });
 
             if (!title.trim()) {
@@ -164,6 +162,8 @@ class NoteDetailRelationMap {
             noteDetailService.openInTab(noteId);
         }
         else if (cmd === "remove") {
+            const confirmDialog = await import('../dialogs/confirm.js');
+
             if (!await confirmDialog.confirmDeleteNoteBoxWithNote($title.text())) {
                 return;
             }
@@ -184,6 +184,7 @@ class NoteDetailRelationMap {
             this.saveData();
         }
         else if (cmd === "edit-title") {
+            const promptDialog = await import('"../dialogs/prompt.js"');
             const title = await promptDialog.ask({
                 message: "Enter new note title:",
                 defaultValue: $title.text()
@@ -429,6 +430,8 @@ class NoteDetailRelationMap {
                     },
                     selectContextMenuItem: async (event, cmd) => {
                         if (cmd === 'remove') {
+                            const confirmDialog = await import('../dialogs/confirm.js');
+
                             if (!await confirmDialog.confirm("Are you sure you want to remove the relation?")) {
                                 return;
                             }
@@ -451,6 +454,7 @@ class NoteDetailRelationMap {
             return;
         }
 
+        const promptDialog = await import('"../dialogs/prompt.js"');
         const name = await promptDialog.ask({
             message: "Specify new relation name:",
             shown: ({ $answer }) =>
@@ -476,6 +480,7 @@ class NoteDetailRelationMap {
             && rel.name === name);
 
         if (relationExists) {
+            const infoDialog = await import('../dialogs/info.js');
             await infoDialog.info("Connection '" + name + "' between these notes already exists.");
 
             this.jsPlumbInstance.deleteConnection(connection);

src/public/javascripts/services/note_type.js

@@ -2,7 +2,6 @@ import treeService from './tree.js';
 import noteDetailService from './note_detail.js';
 import server from './server.js';
 import infoService from "./info.js";
-import confirmDialog from "../dialogs/confirm.js";
 
 const DEFAULT_MIME_TYPES = [
     { mime: 'text/x-csrc', title: 'C' },
@@ -113,12 +112,13 @@ function NoteTypeContext(ctx) {
         self.updateExecuteScriptButtonVisibility();
     }
 
-    function confirmChangeIfContent() {
+    async function confirmChangeIfContent() {
         if (!self.ctx.getComponent().getContent()) {
             return true;
         }
 
-        return confirmDialog.confirm("It is not recommended to change note type when note content is not empty. Do you want to continue anyway?");
+        const confirmDialog = await import("../dialogs/confirm.js");
+        return await confirmDialog.confirm("It is not recommended to change note type when note content is not empty. Do you want to continue anyway?");
     }
 
     this.selectText = async function() {

src/public/javascripts/services/protected_session.js

@@ -4,7 +4,6 @@ import utils from './utils.js';
 import server from './server.js';
 import protectedSessionHolder from './protected_session_holder.js';
 import infoService from "./info.js";
-import protectedSessionDialog from "../dialogs/protected_session.js";
 
 const $enterProtectedSessionButton = $("#enter-protected-session-button");
 const $leaveProtectedSessionButton = $("#leave-protected-session-button");
@@ -28,7 +27,7 @@ function enterProtectedSession() {
         // using deferred instead of promise because it allows resolving from outside
         protectedSessionDeferred = dfd;
 
-        protectedSessionDialog.show();
+        import("../dialogs/protected_session.js").then(protectedSessionDialog => protectedSessionDialog.show())
     }
 
     return dfd.promise();

src/public/javascripts/services/sidebar.js

@@ -1,8 +1,3 @@
-import NoteInfoWidget from "../widgets/note_info.js";
-import LinkMapWidget from "../widgets/link_map.js";
-import NoteRevisionsWidget from "../widgets/note_revisions.js";
-import AttributesWidget from "../widgets/attributes.js";
-import WhatLinksHereWidget from "../widgets/what_links_here.js";
 import bundleService from "./bundle.js";
 import messagingService from "./messaging.js";
 
@@ -32,6 +27,7 @@ class Sidebar {
             this.$sidebar.show();
             this.$showSideBarButton.hide();
             this.ctx.stateChanged();
+            this.noteLoaded();
         });
 
         this.$showSideBarButton.toggle(!state.visible);
@@ -50,10 +46,20 @@ class Sidebar {
     }
 
     async noteLoaded() {
+        if (!this.isVisible() || !this.ctx.note) {
+            return;
+        }
+
         this.widgets = [];
         this.$widgetContainer.empty();
 
-        const widgetClasses = [AttributesWidget, LinkMapWidget, WhatLinksHereWidget, NoteRevisionsWidget, NoteInfoWidget];
+        const widgetClasses = [
+            await import("../widgets/note_info.js"),
+            await import("../widgets/link_map.js"),
+            await import("../widgets/note_revisions.js"),
+            await import("../widgets/attributes.js"),
+            await import("../widgets/what_links_here.js")
+        ].map(m => m.default);
 
         const widgetRelations = await this.ctx.note.getRelations('widget');
 

src/public/javascripts/services/tree.js

@@ -13,7 +13,6 @@ import treeKeyBindings from "./tree_keybindings.js";
 import Branch from '../entities/branch.js';
 import NoteShort from '../entities/note_short.js';
 import hoistedNoteService from '../services/hoisted_note.js';
-import confirmDialog from "../dialogs/confirm.js";
 import optionsInit from "../services/options_init.js";
 import TreeContextMenu from "./tree_context_menu.js";
 import bundle from "./bundle.js";
@@ -154,6 +153,8 @@ async function activateNote(notePath, noteLoadedListener) {
     const hoistedNoteId = await hoistedNoteService.getHoistedNoteId();
 
     if (hoistedNoteId !== 'root' && !runNotePath.includes(hoistedNoteId)) {
+        const confirmDialog = await import('../dialogs/confirm.js');
+
         if (!await confirmDialog.confirm("Requested note is outside of hoisted note subtree. Do you want to unhoist?")) {
             return;
         }

src/public/javascripts/services/tree_context_menu.js

@@ -3,9 +3,6 @@ import messagingService from './messaging.js';
 import protectedSessionService from './protected_session.js';
 import treeChangesService from './branches.js';
 import treeUtils from './tree_utils.js';
-import branchPrefixDialog from '../dialogs/branch_prefix.js';
-import exportDialog from '../dialogs/export.js';
-import importDialog from '../dialogs/import.js';
 import treeCache from "./tree_cache.js";
 import syncService from "./sync.js";
 import hoistedNoteService from './hoisted_note.js';
@@ -108,6 +105,7 @@ class TreeContextMenu {
             });
         }
         else if (cmd === "editBranchPrefix") {
+            const branchPrefixDialog = await import('../dialogs/branch_prefix.js');
             branchPrefixDialog.showDialog(this.node);
         }
         else if (cmd === "protectSubtree") {
@@ -132,9 +130,11 @@ class TreeContextMenu {
             treeChangesService.deleteNodes(treeService.getSelectedOrActiveNodes(this.node));
         }
         else if (cmd === "export") {
+            const exportDialog = await import('../dialogs/export.js');
             exportDialog.showDialog(this.node,"subtree");
         }
         else if (cmd === "importIntoNote") {
+            const importDialog = await import('../dialogs/import.js');
             importDialog.showDialog(this.node);
         }
         else if (cmd === "collapseSubtree") {

src/public/javascripts/services/tree_keybindings.js

@@ -1,7 +1,6 @@
 import noteDetailService from "./note_detail.js";
 import treeChangesService from "./branches.js";
 import treeService from "./tree.js";
-import editBranchPrefixDialog from "../dialogs/branch_prefix.js";
 import hoistedNoteService from "./hoisted_note.js";
 import clipboard from "./clipboard.js";
 
@@ -86,7 +85,8 @@ const keyBindings = {
 
         return false;
     },
-    "f2": node => {
+    "f2": async node => {
+        const editBranchPrefixDialog = await import("../dialogs/branch_prefix.js");
         editBranchPrefixDialog.showDialog(node);
     },
     "alt+-": node => {

src/public/javascripts/widgets/attributes.js

@@ -1,4 +1,3 @@
-import attributesDialog from "../dialogs/attributes.js";
 import utils from "../services/utils.js";
 import linkService from "../services/link.js";
 import messagingService from "../services/messaging.js";
@@ -9,7 +8,8 @@ class AttributesWidget extends StandardWidget {
 
     getHeaderActions() {
         const $showFullButton = $("<a>").append("show dialog").addClass('widget-header-action');
-        $showFullButton.click(() => {
+        $showFullButton.click(async () => {
+            const attributesDialog = await import("../dialogs/attributes.js");
             attributesDialog.showDialog();
         });
 

src/public/javascripts/widgets/link_map.js

@@ -1,5 +1,4 @@
 import libraryLoader from "../services/library_loader.js";
-import linkMapDialog from "../dialogs/link_map.js";
 import server from "../services/server.js";
 import treeCache from "../services/tree_cache.js";
 import linkService from "../services/link.js";
@@ -28,7 +27,8 @@ class LinkMapWidget extends StandardWidget {
 
     getHeaderActions() {
         const $showFullButton = $("<a>").append("show full").addClass('widget-header-action');
-        $showFullButton.click(() => {
+        $showFullButton.click(async () => {
+            const linkMapDialog = await import("../dialogs/link_map.js");
             linkMapDialog.showDialog();
         });