perf: speed up startup time

apps/web/src/app.js

@@ -15,7 +15,8 @@ import Editor from "./components/editor";
 import useMobile from "./utils/use-mobile";
 import GlobalMenuWrapper from "./components/globalmenuwrapper";
 import { resetReminders } from "./common/reminders";
-import { db, isUserPremium } from "./common";
+import { isUserPremium } from "./common";
+import { db } from "./common/db";
 import { CHECK_IDS, EV, EVENTS } from "notes-core/common";
 import useTablet from "./utils/use-tablet";
 import { showBuyDialog } from "./common/dialog-controller";
@@ -33,6 +34,7 @@ import {
 } from "./common/dialog-controller";
 import { useAnimation } from "framer-motion";
 import RouteContainer from "./components/route-container";
+import { MotionConfig, AnimationFeature, GesturesFeature } from "framer-motion";
 
 function App() {
   const [show, setShow] = useState(true);
@@ -122,6 +124,7 @@ function App() {
   }, [isMobile, isTablet, toggleSideMenu]);
 
   return (
+    <MotionConfig features={[AnimationFeature, GesturesFeature]}>
       <ThemeProvider>
         <Flex
           flexDirection="column"
@@ -170,6 +173,7 @@ function App() {
           <ThemeTransition />
         </Flex>
       </ThemeProvider>
+    </MotionConfig>
   );
 }
 

apps/web/src/common/db.js

@@ -0,0 +1,35 @@
+import StorageInterface from "../interfaces/storage";
+import EventSource from "eventsource";
+
+/**
+ * @type {import("notes-core/api").default}
+ */
+var db;
+function initializeDatabase() {
+  return import("notes-core/api").then(({ default: Database }) => {
+    db = new Database(StorageInterface, EventSource);
+    return db.init();
+  });
+}
+
+export { db, initializeDatabase };
+
+// export const db = new Database(StorageInterface, EventSource);
+
+// // db.host({
+// //   API_HOST: "https://api.notesnook.com",
+// //   AUTH_HOST: "https://auth.streetwriters.co",
+// //   SSE_HOST: "https://events.streetwriters.co",
+// // });
+
+// db.host({
+//   API_HOST: "http://localhost:5264",
+//   AUTH_HOST: "http://localhost:8264",
+//   SSE_HOST: "http://localhost:7264",
+// });
+
+// // db.host({
+// //   API_HOST: "http://192.168.10.7:5264",
+// //   AUTH_HOST: "http://192.168.10.7:8264",
+// //   SSE_HOST: "http://192.168.10.7:7264",
+// // });

apps/web/src/common/dialogcontroller.js

@@ -4,7 +4,7 @@ import { hashNavigate } from "../navigation";
 import ThemeProvider from "../components/theme-provider";
 import { qclone } from "qclone";
 import { store as notebookStore } from "../stores/notebook-store";
-import { db } from ".";
+import { db } from "./db";
 import { showToast } from "../utils/toast";
 import { CHECK_IDS } from "notes-core/common";
 import { Flex, Text } from "rebass";

apps/web/src/common/index.js

@@ -1,8 +1,5 @@
 import React from "react";
-import StorageInterface from "../interfaces/storage";
-import Database from "notes-core/api/";
 import SelectionOptions from "./selectionoptions";
-import EventSource from "eventsource";
 import { showToast } from "../utils/toast";
 import download from "../utils/download";
 import { Text } from "rebass";
@@ -10,26 +7,7 @@ import { showLoadingDialog } from "../common/dialog-controller";
 import Config from "../utils/config";
 import { store as userstore } from "../stores/user-store";
 import { hashNavigate } from "../navigation";
-
-export const db = new Database(StorageInterface, EventSource);
-
-// db.host({
-//   API_HOST: "https://api.notesnook.com",
-//   AUTH_HOST: "https://auth.streetwriters.co",
-//   SSE_HOST: "https://events.streetwriters.co",
-// });
-
-db.host({
-  API_HOST: "http://localhost:5264",
-  AUTH_HOST: "http://localhost:8264",
-  SSE_HOST: "http://localhost:7264",
-});
-
-// db.host({
-//   API_HOST: "http://192.168.10.7:5264",
-//   AUTH_HOST: "http://192.168.10.7:8264",
-//   SSE_HOST: "http://192.168.10.7:7264",
-// });
+import { db } from "./db";
 
 export const COLORS = {
   red: "#f44336",

apps/web/src/common/reminders.js

@@ -1,5 +1,6 @@
 import Config from "../utils/config";
-import { createBackup, db } from "./index";
+import { createBackup } from "./index";
+import { db } from "./db";
 import { store as appStore } from "../stores/app-store";
 import * as Icon from "../components/icons";
 import dayjs from "dayjs";

apps/web/src/common/selectionoptions.js

@@ -4,7 +4,7 @@ import { store as notesStore } from "../stores/note-store";
 import { store as nbStore } from "../stores/notebook-store";
 import { store as editorStore } from "../stores/editor-store";
 import { store as trashStore } from "../stores/trash-store";
-import { db } from "./index";
+import { db } from "./db";
 import { showMoveNoteDialog } from "../common/dialog-controller";
 import { showMultiDeleteConfirmation } from "../common/dialog-controller";
 import { showExportDialog } from "../common/dialog-controller";

apps/web/src/common/toasts.js

@@ -1,4 +1,4 @@
-import { db } from ".";
+import { db } from "./db";
 import { store as notestore } from "../stores/note-store";
 import { store as nbstore } from "../stores/notebook-store";
 import { store as trashstore } from "../stores/trash-store";

apps/web/src/common/vault.js

@@ -1,4 +1,4 @@
-import { db } from "../common";
+import { db } from "../common/db";
 import { showPasswordDialog } from "../common/dialog-controller";
 import { showToast } from "../utils/toast";
 

apps/web/src/components/dialogs/email-verification-dialog.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Flex, Button, Text } from "rebass";
 import Dialog from "./dialog";
 import { useStore as useUserStore } from "../../stores/user-store";
-import { db } from "../../common";
+import { db } from "../../common/db";
 import { useState } from "react";
 
 function EmailVerificationDialog(props) {

apps/web/src/components/dialogs/forgotpassworddialog.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Text, Box } from "rebass";
 import Dialog from "./dialog";
 import Field from "../field";
-import { db } from "../../common";
+import { db } from "../../common/db";
 import { showToast } from "../../utils/toast";
 
 const requiredValues = ["email"];

apps/web/src/components/dialogs/move-note-dialog.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Flex, Box, Text } from "rebass";
 import * as Icon from "../icons";
-import { db } from "../../common";
+import { db } from "../../common/db";
 import Dialog from "./dialog";
 import { showNotesMovedToast } from "../../common/toasts";
 import { showToast } from "../../utils/toast";

apps/web/src/components/dialogs/recovery-key-dialog.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Text, Flex, Button } from "rebass";
 import Dialog from "./dialog";
-import { db } from "../../common";
+import { db } from "../../common/db";
 import Logo from "../../assets/notesnook-small.png";
 import download from "../../utils/download";
 import ClipboardJS from "clipboard";

apps/web/src/components/navigation-menu/index.js

@@ -9,7 +9,8 @@ import Animated from "../animated";
 import NavigationItem from "./navigation-item";
 import { hashNavigate, navigate } from "../../navigation";
 import { toTitleCase } from "../../utils/string";
-import { COLORS, db } from "../../common";
+import { COLORS } from "../../common";
+import { db } from "../../common/db";
 import useMobile from "../../utils/use-mobile";
 import useTablet from "../../utils/use-tablet";
 import { useLocation } from "wouter";

apps/web/src/components/note/index.js

@@ -6,7 +6,8 @@ import ListItem from "../list-item";
 import { showMoveNoteDialog } from "../../common/dialog-controller";
 import { store, useStore } from "../../stores/note-store";
 import { showPasswordDialog } from "../../common/dialog-controller";
-import { db, COLORS } from "../../common";
+import { COLORS } from "../../common";
+import { db } from "../../common/db";
 import { useTheme } from "emotion-theming";
 import Colors from "../menu/colors";
 import { showExportDialog } from "../../common/dialog-controller";

apps/web/src/components/notebook/index.js

@@ -4,7 +4,7 @@ import ListItem from "../list-item";
 import { store } from "../../stores/notebook-store";
 import { store as appStore } from "../../stores/app-store";
 import { showItemDeletedToast, showUnpinnedToast } from "../../common/toasts";
-import { db } from "../../common";
+import { db } from "../../common/db";
 import * as Icon from "../icons";
 import { hashNavigate } from "../../navigation";
 

apps/web/src/components/properties/index.js

@@ -3,7 +3,8 @@ import * as Icon from "../icons";
 import { Flex, Text, Button } from "rebass";
 import { Input } from "@rebass/forms";
 import { useStore } from "../../stores/editor-store";
-import { COLORS, db } from "../../common";
+import { COLORS } from "../../common";
+import { db } from "../../common/db";
 import { objectMap } from "../../utils/object";
 import { useStore as useAppStore } from "../../stores/app-store";
 import Animated from "../animated";

apps/web/src/components/spliteditor/contenttoggle.js

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import { Flex, Text, Button } from "rebass";
 import { timeConverter } from "../../utils/time";
 import { store as notestore } from "../../stores/note-store";
-import { db } from "../../common";
+import { db } from "../../common/db";
 import { hashNavigate } from "../../navigation";
 import diff from "./differ";
 

apps/web/src/components/spliteditor/index.js

@@ -3,7 +3,7 @@ import { Flex, Box, Text } from "rebass";
 import SimpleEditor from "./simpleeditor";
 import ContentToggle from "./content-toggle";
 import { store as notesStore } from "../../stores/note-store";
-import { db } from "../../common";
+import { db } from "../../common/db";
 import { useStore as useAppStore } from "../../stores/app-store";
 import { hashNavigate } from "../../navigation";
 import diff from "./differ";

apps/web/src/components/tag/index.js

@@ -3,7 +3,7 @@ import ListItem from "../list-item";
 import { navigate } from "../../navigation";
 import { Text } from "rebass";
 import { store as appStore } from "../../stores/app-store";
-import { db } from "../../common";
+import { db } from "../../common/db";
 
 const menuItems = (item) => [
   {

apps/web/src/components/topic/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import ListItem from "../list-item";
-import { db } from "../../common";
+import { db } from "../../common/db";
 import { store } from "../../stores/notebook-store";
 import { store as appStore } from "../../stores/app-store";
 import { hashNavigate } from "../../navigation";

apps/web/src/components/unlock/index.js

@@ -2,7 +2,7 @@ import React, { useRef, useState, useCallback, useEffect } from "react";
 import { Flex, Text, Button } from "rebass";
 import { Input } from "@rebass/forms";
 import * as Icon from "../icons";
-import { db } from "../../common";
+import { db } from "../../common/db";
 import { useStore as useEditorStore } from "../../stores/editor-store";
 import { useStore as useAppStore } from "../../stores/app-store";
 

apps/web/src/index.js

@@ -1,59 +1,52 @@
-import "react-app-polyfill/ie11";
-import "react-app-polyfill/ie9";
-import "./utils/dimensions";
-import React from "react";
-import ReactDOM from "react-dom";
-import { init, showReportDialog } from "@sentry/react";
-import { Integrations } from "@sentry/tracing";
+import React, { Suspense } from "react";
+// import { init, showReportDialog } from "@sentry/react";
+// import { Integrations } from "@sentry/tracing";
 import "./index.css";
 import * as serviceWorker from "./serviceWorker";
-import Modal from "react-modal";
-import { MotionConfig, AnimationFeature, GesturesFeature } from "framer-motion";
 import Splash from "./views/splash";
-import { getAppVersion } from "./utils/useVersion";
-import { Suspense } from "react";
-
+// import { getAppVersion } from "./utils/useVersion";
 const App = React.lazy(() => import("./App"));
 
-if (process.env.NODE_ENV === "production") {
-  console.log = () => {};
-  init({
-    dsn:
-      "https://647084abf3de441c83c17d2b603633b8@o477952.ingest.sentry.io/5520885",
-    integrations: [new Integrations.BrowserTracing()],
-    beforeSend: (event) => {
-      if (event.exception || event.extra.report === true) {
-        showReportDialog();
-      }
-      return event;
-    },
-    release: `notesnook-web@${getAppVersion().formatted}`,
-    ignoreErrors: [/ResizeObserver loop limit exceeded/],
-    // We recommend adjusting this value in production, or using tracesSampler
-    // for finer control
-    tracesSampleRate: 1.0,
-  });
-}
+// if (process.env.NODE_ENV === "production") {
+//   console.log = () => {};
+//   init({
+//     dsn:
+//       "https://647084abf3de441c83c17d2b603633b8@o477952.ingest.sentry.io/5520885",
+//     integrations: [new Integrations.BrowserTracing()],
+//     beforeSend: (event) => {
+//       if (event.exception || event.extra.report === true) {
+//         showReportDialog();
+//       }
+//       return event;
+//     },
+//     release: `notesnook-web@${getAppVersion().formatted}`,
+//     ignoreErrors: [/ResizeObserver loop limit exceeded/],
+//     // We recommend adjusting this value in production, or using tracesSampler
+//     // for finer control
+//     tracesSampleRate: 1.0,
+//   });
+// }
 
-Modal.setAppElement("#root");
-ReactDOM.render(
-  <MotionConfig features={[AnimationFeature, GesturesFeature]}>
+import("react-dom").then(({ render }) => {
+  render(
     <Splash
       onLoadingFinished={() => {
-        ReactDOM.render(
+        render(
           <Suspense fallback={<div />}>
-            <MotionConfig features={[AnimationFeature, GesturesFeature]}>
             <App />
-            </MotionConfig>
           </Suspense>,
-          document.getElementById("root")
+          document.getElementById("root"),
+          () => {
+            import("react-modal").then(({ default: Modal }) => {
+              Modal.setAppElement("#root");
+            });
+          }
         );
       }}
-    />
-  </MotionConfig>,
-  document.getElementById("root"),
-  () => {}
-);
+    />,
+    document.getElementById("root")
+  );
+});
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

apps/web/src/navigation/routes.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { db } from "../common";
+import { db } from "../common/db";
 import { toTitleCase } from "../utils/string";
 import Home from "../views/home";
 import Notebooks from "../views/notebooks";

apps/web/src/stores/app-store.js

@@ -1,5 +1,5 @@
 import createStore from "../common/store";
-import { db } from "../common";
+import { db } from "../common/db";
 import { store as noteStore } from "./note-store";
 import { store as notebookStore } from "./notebook-store";
 import { store as trashStore } from "./trash-store";

apps/web/src/stores/editor-store.js

@@ -2,7 +2,7 @@ import createStore from "../common/store";
 import { store as noteStore } from "./note-store";
 import { store as appStore } from "./app-store";
 import { store as tagStore } from "./tag-store";
-import { db } from "../common";
+import { db } from "../common/db";
 import BaseStore from ".";
 import { EV, EVENTS } from "notes-core/common";
 import { hashNavigate } from "../navigation";

apps/web/src/stores/note-store.js

@@ -1,4 +1,5 @@
-import { db, notesFromContext } from "../common/index";
+import { notesFromContext } from "../common";
+import { db } from "../common/db";
 import createStore from "../common/store";
 import { store as editorStore } from "./editor-store";
 import { store as appStore } from "./app-store";

apps/web/src/stores/notebook-store.js

@@ -1,4 +1,4 @@
-import { db } from "../common/index";
+import { db } from "../common/db";
 import createStore from "../common/store";
 import { store as appStore } from "./app-store";
 import BaseStore from "./index";

apps/web/src/stores/search-store.js

@@ -1,5 +1,5 @@
 import createStore from "../common/store";
-import { db } from "../common";
+import { db } from "../common/db";
 import BaseStore from "./index";
 
 class SearchStore extends BaseStore {

apps/web/src/stores/tag-store.js

@@ -1,12 +1,12 @@
 import createStore from "../common/store";
-import { db } from "../common";
+import { db } from "../common/db";
 import BaseStore from "./index";
 
 class TagStore extends BaseStore {
   tags = [];
 
   refresh = () => {
-    this.set(state => (state.tags = db.tags.all));
+    this.set((state) => (state.tags = db.tags.all));
   };
 }
 

apps/web/src/stores/trash-store.js

@@ -1,4 +1,4 @@
-import { db } from "../common/index";
+import { db } from "../common/db";
 import createStore from "../common/store";
 import BaseStore from "./index";
 import { store as appStore } from "./app-store";

apps/web/src/stores/user-store.js

@@ -1,6 +1,6 @@
 import React from "react";
 import createStore from "../common/store";
-import { db } from "../common";
+import { db } from "../common/db";
 import { store as appStore } from "./app-store";
 import BaseStore from "./index";
 import config from "../utils/config";

apps/web/src/utils/useVersion.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { db } from "../common";
+import { db } from "../common/db";
 import config from "./config";
 
 var APP_VERSION = {

apps/web/src/views/home.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useStore, store } from "../stores/note-store";
 import ListContainer from "../components/list-container";
 import NotesPlaceholder from "../components/placeholders/notesplacholder";
-import { db } from "../common";
+import { db } from "../common/db";
 import { hashNavigate } from "../navigation";
 
 function Home() {

apps/web/src/views/recovery.js

@@ -4,7 +4,7 @@ import { useQueryParams } from "../navigation";
 import ThemeProvider from "../components/theme-provider";
 import Field from "../components/field";
 import * as Icon from "../components/icons";
-import { db } from "../common";
+import { db } from "../common/db";
 import { showToast } from "../utils/toast";
 import { useCallback } from "react";
 

apps/web/src/views/search.js

@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 import ListContainer from "../components/list-container";
 import SearchPlaceholder from "../components/placeholders/search-placeholder";
-import { db, notesFromContext } from "../common";
+import { notesFromContext } from "../common";
+import { db } from "../common/db";
 import SearchBox from "../components/search";
 import ProgressBar from "../components/progress-bar";
 import { useStore as useNoteStore } from "../stores/note-store";

apps/web/src/views/settings.js

@@ -10,12 +10,8 @@ import accents from "../theme/accents";
 import { showLogInDialog } from "../common/dialog-controller";
 import { showLogoutConfirmation } from "../common/dialog-controller";
 import useSystemTheme from "../utils/use-system-theme";
-import {
-  createBackup,
-  db,
-  isUserPremium,
-  SUBSCRIPTION_STATUS,
-} from "../common";
+import { createBackup, isUserPremium, SUBSCRIPTION_STATUS } from "../common";
+import { db } from "../common/db";
 import { usePersistentState } from "../utils/hooks";
 import dayjs from "dayjs";
 import { showRecoveryKeyDialog } from "../common/dialog-controller";

apps/web/src/views/splash.js

@@ -1,62 +1,38 @@
-import React, { useEffect, useState } from "react";
-import { Flex } from "rebass";
-import Animated from "../components/animated";
+import React, { useEffect } from "react";
 import Logo from "../assets/notesnook-logo.png";
-import { db } from "../common";
-import { EV, EVENTS } from "notes-core/common";
-import { showToast } from "../utils/toast";
-import { captureException } from "@sentry/react";
+import { initializeDatabase } from "../common/db";
 
 function Splash(props) {
-  const [loading, setLoading] = useState(true);
-  const [animationEnded, setAnimationEnded] = useState(false);
   useEffect(() => {
     (async function () {
       try {
-        EV.subscribe(EVENTS.userLoggedOut, (reason) => {
-          if (reason) {
-            showToast("error", reason);
-          }
-        });
-        await db.init();
+        await initializeDatabase();
       } catch (e) {
-        captureException(e, (scope) => {
-          scope.setExtra("where", "db.init");
-          return scope;
-        });
+        // captureException(e, (scope) => {
+        //   scope.setExtra("where", "db.init");
+        //   return scope;
+        // });
         console.error(e);
-        showToast("error", `Error initializing database: ${e.message}`);
+        alert("Error: " + `Error initializing database: ${e.message}`);
       } finally {
-        setLoading(false);
+        props.onLoadingFinished();
       }
     })();
   }, []);
 
-  useEffect(() => {
-    if (!loading && animationEnded) props.onLoadingFinished();
-  }, [loading, animationEnded, props]);
-
   return (
-    <Flex
-      flexDirection="column"
-      bg="#f0f0f0"
-      height="100%"
-      justifyContent="center"
-      alignItems="center"
-      overflow="hidden"
-    >
-      <Animated.Image
-        src={Logo}
-        width={150}
-        animate={{ scale: 1.05 }}
-        transition={{
-          repeat: 1,
-          repeatType: "reverse",
-          duration: 1,
+    <div
+      style={{
+        backgroundColor: "#f0f0f0",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
       }}
-        onAnimationComplete={() => setAnimationEnded(true)}
-      />
-    </Flex>
+    >
+      <img alt="Notesnook logo" src={Logo} width={150} />
+    </div>
   );
 }
 export default Splash;