loading indicator and optimisations for mobile

package-lock.json

@@ -2165,9 +2165,9 @@
       "integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI="
     },
     "dayjs": {
-      "version": "1.8.23",
+      "version": "1.8.24",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.23.tgz",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.24.tgz",
-      "integrity": "sha512-NmYHMFONftoZbeOhVz6jfiXI4zSiPN6NoVWJgC0aZQfYVwzy/ZpESPHuCcI0B8BUMpSJQ08zenHDbofOLKq8hQ=="
+      "integrity": "sha512-bImQZbBv86zcOWOq6fLg7r4aqMx8fScdmykA7cSh+gH1Yh8AM0Dbw0gHYrsOrza6oBBnkK+/OaR+UAa9UsMrDw=="
     },
     "debug": {
       "version": "4.1.1",
@@ -2687,9 +2687,9 @@
       "integrity": "sha512-IncmUpn1yN84hy2shb0POJ80FWrfGNY0cxO9f4v+/sG7qcBvAtVWUA1IdzY/8EYUmOVhoKJVdJjNd3AZcnxOjA=="
     },
     "electron": {
-      "version": "9.0.0-beta.14",
+      "version": "9.0.0-beta.15",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-9.0.0-beta.14.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-9.0.0-beta.15.tgz",
-      "integrity": "sha512-zk0TcX5Id4pbROx70h2XZohxAh2rlhtQ60NJ8AkNyaBVfIZKa6v1Ss0RMuJTe1YUmtFgUtogLEWyq8+xdsdHrg==",
+      "integrity": "sha512-trC0uHL11l5GWmMY8MZpj3QcyQnQWANiauLkeOvYv/QTbj5K0H3bRXmG3QhZcVNdNAG5tEd1hDMhQHe5oRrn9A==",
       "dev": true,
       "requires": {
         "@electron/get": "^1.0.1",
@@ -8840,9 +8840,9 @@
       }
     },
     "semver": {
-      "version": "7.2.1",
+      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.2.2.tgz",
-      "integrity": "sha512-aHhm1pD02jXXkyIpq25qBZjr3CQgg8KST8uX0OWXch3xE6jw+1bfbWnCjzMwojsTquroUmKFHNzU6x26mEiRxw=="
+      "integrity": "sha512-Zo84u6o2PebMSK3zjJ6Zp5wi8VnQZnEaCP13Ul/lt1ANsLACxnJxq4EEm1PY94/por1Hm9+7xpIswdS5AkieMA=="
     },
     "semver-compare": {
       "version": "1.0.0",
@@ -9164,9 +9164,9 @@
       "dev": true
     },
     "sqlite": {
-      "version": "4.0.5",
+      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/sqlite/-/sqlite-4.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/sqlite/-/sqlite-4.0.6.tgz",
-      "integrity": "sha512-O4UAFN+YsZJw5d+iAfFttP1rE26AQOdaEnQgbCSlLgg++b5/v3Zkp5zBLnfcZrQi+BA+urVDrTA/FC5o/DUNFg=="
+      "integrity": "sha512-irh1vzqke8XzO+BZQnFAX9doIsILFxpjDPWSX005thjxqx+GXApAMarNkM6Ta7S/yT6KMJ9bniwiD0bRcQuuFQ=="
     },
     "sqlite3": {
       "version": "4.1.1",

package.json

@@ -27,7 +27,7 @@
     "commonmark": "0.29.1",
     "cookie-parser": "1.4.5",
     "csurf": "1.11.0",
-    "dayjs": "1.8.23",
+    "dayjs": "1.8.24",
     "debug": "4.1.1",
     "ejs": "3.0.2",
     "electron-debug": "3.0.1",
@@ -61,11 +61,11 @@
     "rimraf": "3.0.2",
     "sanitize-filename": "1.6.3",
     "sax": "1.2.4",
-    "semver": "7.2.1",
+    "semver": "7.2.2",
     "serve-favicon": "2.5.0",
     "session-file-store": "1.4.0",
     "simple-node-logger": "18.12.24",
-    "sqlite": "4.0.5",
+    "sqlite": "4.0.6",
     "sqlite3": "4.1.1",
     "string-similarity": "4.0.1",
     "tar-stream": "2.1.2",

src/public/javascripts/desktop.js

@@ -1,3 +1,6 @@
+import treeCache from './services/tree_cache.js';
+import options from "./services/options.js";
+import appContext from "./services/app_context.js";
 import glob from './services/glob.js';
 import link from './services/link.js';
 import ws from './services/ws.js';
@@ -14,7 +17,6 @@ import server from './services/server.js';
 import Entrypoints from './services/entrypoints.js';
 import noteTooltipService from './services/note_tooltip.js';
 import bundle from "./services/bundle.js";
-import treeCache from "./services/tree_cache.js";
 import libraryLoader from "./services/library_loader.js";
 import hoistedNoteService from './services/hoisted_note.js';
 import noteTypeService from './widgets/note_type.js';
@@ -25,9 +27,7 @@ import dateNoteService from './services/date_notes.js';
 import importService from './services/import.js';
 import keyboardActionService from "./services/keyboard_actions.js";
 import splitService from "./services/split.js";
-import options from "./services/options.js";
 import noteContentRenderer from "./services/note_content_renderer.js";
-import appContext from "./services/app_context.js";
 import FlexContainer from "./widgets/flex_container.js";
 import GlobalMenuWidget from "./widgets/global_menu.js";
 import TabRowWidget from "./widgets/tab_row.js";
@@ -68,6 +68,10 @@ import BookTypeWidget from "./widgets/type_widgets/book.js";
 import contextMenu from "./services/context_menu.js";
 import DesktopLayout from "./widgets/desktop_layout.js";
 import bundleService from "./services/bundle.js";
+import NoteShort from "./entities/note_short.js"
+import NoteCompletement from "./entities/note_complement.js"
+import Branch from "./entities/branch.js"
+import Attribute from "./entities/attribute.js"
 
 if (utils.isElectron()) {
     require('electron').ipcRenderer.on('globalShortcut', async function(event, actionName) {

src/public/javascripts/mobile.js

@@ -1,11 +1,14 @@
-import glob from './services/glob.js';
+import treeCache from './services/tree_cache.js';
-import macInit from './services/mac_init.js';
 import options from "./services/options.js";
-import noteContentRenderer from "./services/note_content_renderer.js";
 import appContext from "./services/app_context.js";
+import glob from './services/glob.js';
+import noteContentRenderer from "./services/note_content_renderer.js";
 import FlexContainer from "./widgets/flex_container.js";
 import EmptyTypeWidget from "./widgets/type_widgets/empty.js";
-import TextTypeWidget from "./widgets/type_widgets/editable_text.js";
+import AbstractTextTypeWidget from "./widgets/type_widgets/abstract_text_type_widget.js";
+import EditableTextTypeWidget from "./widgets/type_widgets/editable_text.js";
+import ReadonlyTextTypeWidget from "./widgets/type_widgets/read_only_text.js";
+import DeletedTypeWidget from "./widgets/type_widgets/deleted.js";
 import CodeTypeWidget from "./widgets/type_widgets/code.js";
 import FileTypeWidget from "./widgets/type_widgets/file.js";
 import ImageTypeWidget from "./widgets/type_widgets/image.js";
@@ -15,8 +18,63 @@ import RelationMapTypeWidget from "./widgets/type_widgets/relation_map.js";
 import ProtectedSessionTypeWidget from "./widgets/type_widgets/protected_session.js";
 import BookTypeWidget from "./widgets/type_widgets/book.js";
 import MobileLayout from "./widgets/mobile_layout.js";
-
+import utils from "./services/utils.js";
-macInit.init();
+import link from './services/link.js';
+import ws from './services/ws.js';
+import noteType from './widgets/note_type.js';
+import protectedSessionService from './services/protected_session.js';
+import protectedSessionHolder from './services/protected_session_holder.js';
+import treeService from './services/tree.js';
+import branchService from './services/branches.js';
+import server from './services/server.js';
+import Entrypoints from './services/entrypoints.js';
+import noteTooltipService from './services/note_tooltip.js';
+import bundle from "./services/bundle.js";
+import libraryLoader from "./services/library_loader.js";
+import hoistedNoteService from './services/hoisted_note.js';
+import noteTypeService from './widgets/note_type.js';
+import linkService from './services/link.js';
+import dateNoteService from './services/date_notes.js';
+import importService from './services/import.js';
+import keyboardActionService from "./services/keyboard_actions.js";
+import splitService from "./services/split.js";
+import GlobalMenuWidget from "./widgets/global_menu.js";
+import TabRowWidget from "./widgets/tab_row.js";
+import NoteTreeWidget from "./widgets/note_tree.js";
+import treeBuilderService from "./services/tree_builder.js";
+import spacedUpdateService from "./services/spaced_update.js";
+import toastService from "./services/toast.js";
+import BasicWidget from "./widgets/basic_widget.js";
+import TabAwareWidget from "./widgets/tab_aware_widget.js";
+import TabCachingWidget from "./widgets/tab_caching_widget.js";
+import NoteTitleWidget from "./widgets/note_title.js";
+import PromotedAttributesWidget from "./widgets/promoted_attributes.js";
+import NoteDetailWidget from "./widgets/note_detail.js";
+import bundleService from "./services/bundle.js";
+import dialogCommandExecutor from "./services/dialog_command_executor.js";
+import mainTreeExecutor from "./services/main_tree_executors.js";
+import zoom from "./services/zoom.js";
+import tabManager from "./services/tab_manager.js";
+import tabContext from "./services/tab_context.js";
+import Component from "./widgets/component.js";
+import mimeTypes from "./services/mime_types.js";
+import screenContainer from "./widgets/screen_container.js";
+import clipboard from "./services/clipboard.js";
+import renderService from "./services/render.js";
+import NoteShort from "./entities/note_short.js"
+import NoteCompletement from "./entities/note_complement.js"
+import Branch from "./entities/branch.js"
+import Attribute from "./entities/attribute.js"
+import mutex from "./services/mutex.js"
+import noteCreateService from "./services/note_create.js"
+import closeDetailWidget from "./widgets/close_detail_button.js"
+import mobileDetailMenu from "./widgets/mobile_detail_menu.js"
+import mobileGlobalButtons from "./widgets/mobile_global_buttons.js"
+import mobileScreenSwitcher from "./widgets/mobile_screen_switcher.js";
+import frontendScriptApi from "./services/frontend_script_api.js";
+import CollapsibleWidget from "./widgets/collapsible_widget.js";
+import LoadResults from "./services/load_results.js";
+import syncService from "./services/sync.js";
 
 appContext.setLayout(new MobileLayout());
 appContext.start();

src/public/javascripts/services/app_context.js

@@ -20,11 +20,15 @@ class AppContext extends Component {
     async start() {
         await Promise.all([treeCache.initializedPromise, options.initializedPromise]);
 
+        $("#loading-indicator").hide();
+
         this.showWidgets();
 
         this.tabManager.loadTabs();
 
-        setTimeout(() => bundleService.executeStartupBundles(), 2000);
+        if (utils.isDesktop()) {
+            setTimeout(() => bundleService.executeStartupBundles(), 2000);
+        }
     }
 
     showWidgets() {

src/public/javascripts/widgets/note_tree.js

@@ -4,7 +4,6 @@ import utils from "../services/utils.js";
 import contextMenu from "../services/context_menu.js";
 import treeCache from "../services/tree_cache.js";
 import treeBuilder from "../services/tree_builder.js";
-import TreeContextMenu from "../services/tree_context_menu.js";
 import branchService from "../services/branches.js";
 import ws from "../services/ws.js";
 import TabAwareWidget from "./tab_aware_widget.js";
@@ -236,8 +235,10 @@ export default class NoteTreeWidget extends TabAwareWidget {
         this.$widget.on('contextmenu', '.fancytree-node', e => {
             const node = $.ui.fancytree.getNode(e);
 
-            const treeContextMenu = new TreeContextMenu(this, node);
+            import("../services/tree_context_menu.js").then(({default: TreeContextMenu}) => {
-            treeContextMenu.show(e);
+                const treeContextMenu = new TreeContextMenu(this, node);
+                treeContextMenu.show(e);
+            });
 
             return false; // blocks default browser right click menu
         });

src/public/javascripts/widgets/type_widgets/relation_map.js

@@ -1,7 +1,6 @@
 import server from "../../services/server.js";
 import linkService from "../../services/link.js";
 import libraryLoader from "../../services/library_loader.js";
-import treeService from "../../services/tree.js";
 import contextMenu from "../../services/context_menu.js";
 import toastService from "../../services/toast.js";
 import attributeAutocompleteService from "../../services/attribute_autocomplete.js";

src/views/mobile.ejs

@@ -6,10 +6,101 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <title>Trilium Notes</title>
     <link rel="apple-touch-icon" sizes="180x180" href="images/app-icons/ios/apple-touch-icon.png">
+
+    <style>
+        .lds-roller {
+            display: inline-block;
+            position: relative;
+            width: 80px;
+            height: 80px;
+        }
+        .lds-roller div {
+            animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+            transform-origin: 40px 40px;
+        }
+        .lds-roller div:after {
+            content: " ";
+            display: block;
+            position: absolute;
+            width: 7px;
+            height: 7px;
+            border-radius: 50%;
+            background: #000;
+            margin: -4px 0 0 -4px;
+        }
+        .lds-roller div:nth-child(1) {
+            animation-delay: -0.036s;
+        }
+        .lds-roller div:nth-child(1):after {
+            top: 63px;
+            left: 63px;
+        }
+        .lds-roller div:nth-child(2) {
+            animation-delay: -0.072s;
+        }
+        .lds-roller div:nth-child(2):after {
+            top: 68px;
+            left: 56px;
+        }
+        .lds-roller div:nth-child(3) {
+            animation-delay: -0.108s;
+        }
+        .lds-roller div:nth-child(3):after {
+            top: 71px;
+            left: 48px;
+        }
+        .lds-roller div:nth-child(4) {
+            animation-delay: -0.144s;
+        }
+        .lds-roller div:nth-child(4):after {
+            top: 72px;
+            left: 40px;
+        }
+        .lds-roller div:nth-child(5) {
+            animation-delay: -0.18s;
+        }
+        .lds-roller div:nth-child(5):after {
+            top: 71px;
+            left: 32px;
+        }
+        .lds-roller div:nth-child(6) {
+            animation-delay: -0.216s;
+        }
+        .lds-roller div:nth-child(6):after {
+            top: 68px;
+            left: 24px;
+        }
+        .lds-roller div:nth-child(7) {
+            animation-delay: -0.252s;
+        }
+        .lds-roller div:nth-child(7):after {
+            top: 63px;
+            left: 17px;
+        }
+        .lds-roller div:nth-child(8) {
+            animation-delay: -0.288s;
+        }
+        .lds-roller div:nth-child(8):after {
+            top: 56px;
+            left: 12px;
+        }
+        @keyframes lds-roller {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
 </head>
-<body class="mobile" style="display: none;">
+<body class="mobile">
 <noscript>Trilium requires JavaScript to be enabled.</noscript>
 
+<div style="text-align: center" id="loading-indicator">
+    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+</div>
+
 <div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
 
 <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
@@ -48,8 +139,5 @@
 
 <link rel="stylesheet" type="text/css" href="libraries/boxicons/css/boxicons.min.css">
 
-<script>
-    $("body").show();
-</script>
 </body>
 </html>