mobile: fix editor stuck in loading state

apps/mobile/app/components/note-history/preview.js

@@ -109,7 +109,6 @@ export default function NotePreview({ session, content, note }) {
             flex: 1
           }}
         >
-          <EditorOverlay editorId={editorId} />
           <Editor
             noHeader
             noToolbar
@@ -117,7 +116,6 @@ export default function NotePreview({ session, content, note }) {
             editorId={editorId}
             onLoad={async () => {
               const _note = note || db.notes.note(session?.noteId)?.data;
-              await sleep(1000);
               eSendEvent(eOnLoadNote + editorId, {
                 ..._note,
                 content: {

apps/mobile/app/screens/editor/index.tsx

@@ -24,29 +24,27 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useRef,
-  useState
+  useLayoutEffect,
+  useRef
 } from "react";
 import { Platform, ViewStyle } from "react-native";
 import WebView from "react-native-webview";
 import { ShouldStartLoadRequest } from "react-native-webview/lib/WebViewTypes";
 import { notesnook } from "../../../e2e/test.ids";
 import { db } from "../../common/database";
-import {
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../services/event-manager";
+import { IconButton } from "../../components/ui/icon-button";
+import useKeyboard from "../../hooks/use-keyboard";
+import { eSubscribeEvent } from "../../services/event-manager";
 import { useEditorStore } from "../../stores/use-editor-store";
 import { getElevationStyle } from "../../utils/elevation";
 import { openLinkInBrowser } from "../../utils/functions";
 import { NoteType } from "../../utils/types";
+import EditorOverlay from "./loading";
 import { EDITOR_URI } from "./source";
 import { EditorProps, useEditorType } from "./tiptap/types";
 import { useEditor } from "./tiptap/use-editor";
 import { useEditorEvents } from "./tiptap/use-editor-events";
 import { editorController } from "./tiptap/utils";
-import { useLayoutEffect } from "react";
-import useKeyboard from "../../hooks/use-keyboard";
 
 const style: ViewStyle = {
   height: "100%",
@@ -129,19 +127,25 @@ const Editor = React.memo(
           renderKey.current === `editor-0` ? `editor-1` : `editor-0`;
         editor.state.current.ready = false;
         editor.setLoading(true);
+        console.log("ERROR ERROR", Date.now());
       }, [editor]);
 
       useEffect(() => {
-        eSubscribeEvent("webview_reset", onError);
-        EV.subscribe(EVENTS.mediaAttachmentDownloaded, onMediaDownloaded);
+        const sub = [
+          eSubscribeEvent("webview_reset", onError),
+          EV.subscribe(EVENTS.mediaAttachmentDownloaded, onMediaDownloaded)
+        ];
+
         return () => {
-          eUnSubscribeEvent("webview_reset", onError);
+          sub.forEach((s) => s.unsubscribe());
           EV.unsubscribe(EVENTS.mediaAttachmentDownloaded, onMediaDownloaded);
         };
       }, [onError, onMediaDownloaded]);
 
       useLayoutEffect(() => {
-        onLoad && onLoad();
+        setImmediate(() => {
+          onLoad && onLoad();
+        });
         // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [onLoad]);
 
@@ -193,9 +197,8 @@ const Editor = React.memo(
             autoManageStatusBarEnabled={false}
             onMessage={onMessage || undefined}
           />
-          {editorId === "shareEditor" ? null : (
-            <AppSection editor={editor} editorId={editorId} />
-          )}
+          <EditorOverlay editorId={editorId || ""} editor={editor} />
+          <ReadonlyButton editor={editor} />
         </>
       );
     }
@@ -205,32 +208,6 @@ const Editor = React.memo(
 
 export default Editor;
 
-let EditorOverlay: React.ElementType;
-let IconButton: React.ElementType;
-const AppSection = ({
-  editor,
-  editorId
-}: {
-  editor: useEditorType;
-  editorId: string;
-}) => {
-  const [loaded, setLoaded] = useState(false);
-  useEffect(() => {
-    EditorOverlay = require("./loading.js").default;
-    IconButton =
-      require("../../components/ui/icon-button/index.tsx").IconButton;
-    setLoaded(true);
-  }, []);
-  return loaded ? (
-    <>
-      {EditorOverlay ? (
-        <EditorOverlay editorId={editorId || ""} editor={editor} />
-      ) : null}
-      {editorId === "" ? <ReadonlyButton editor={editor} /> : null}
-    </>
-  ) : null;
-};
-
 const ReadonlyButton = ({ editor }: { editor: useEditorType }) => {
   const readonly = useEditorStore((state) => state.readonly);
   const keyboard = useKeyboard();
@@ -244,7 +221,7 @@ const ReadonlyButton = ({ editor }: { editor: useEditorType }) => {
     }
   };
 
-  return readonly && IconButton && !keyboard.keyboardShown ? (
+  return readonly && !keyboard.keyboardShown ? (
     <IconButton
       name="pencil-lock"
       type="grayBg"

apps/mobile/app/screens/editor/tiptap/use-editor.ts

@@ -80,6 +80,7 @@ export const useEditor = (
   const lock = useRef(false);
   const loadedImages = useRef<{ [name: string]: boolean }>({});
   const lockedSessionId = useRef<string>();
+  const loadingState = useRef<string>();
 
   const postMessage = useCallback(
     async <T>(type: string, data: T, waitFor = 300) =>
@@ -117,9 +118,8 @@ export const useEditor = (
 
   useEffect(() => {
     if (loading) {
-      setLoading(false);
-    } else {
       state.current.ready = false;
+      setLoading(false);
     }
   }, [loading]);
 
@@ -363,6 +363,9 @@ export const useEditor = (
         isDefaultEditor && editorState.setCurrentlyEditingNote(item.id);
         currentNote.current && (await reset(false, false));
         await loadContent(item as NoteType);
+        if (loadingState.current === currentContent.current?.data) {
+          return;
+        }
         if (
           !currentContent.current?.data ||
           currentContent.current?.data.length < 50000
@@ -385,11 +388,13 @@ export const useEditor = (
         currentNote.current = item as NoteType;
         await commands.setStatus(getFormattedDate(item.dateEdited), "Saved");
         await postMessage(EditorEvents.title, item.title);
+        loadingState.current = currentContent.current?.data;
         await postMessage(
           EditorEvents.html,
           currentContent.current?.data,
           10000
         );
+        loadingState.current = undefined;
         useEditorStore.getState().setReadonly(item.readonly);
         await commands.setTags(currentNote.current);
         commands.setSettings();
@@ -601,9 +606,11 @@ export const useEditor = (
 
   const onReady = useCallback(async () => {
     if (!(await isEditorLoaded(editorRef, sessionIdRef.current))) {
-      eSendEvent("webview_reset");
+      eSendEvent("webview_reset", "onReady");
+      return false;
     } else {
       isDefaultEditor && restoreEditorState();
+      return true;
     }
   }, [isDefaultEditor, restoreEditorState]);
 
@@ -616,15 +623,18 @@ export const useEditor = (
         isDefaultEditor ? insets : { top: 0, left: 0, right: 0, bottom: 0 }
       );
       await commands.setSessionId(sessionIdRef.current);
-      await onReady();
-      state.current.ready = true;
       await commands.setSettings();
-      if (currentNote.current) {
-        loadNote({ ...currentNote.current, forced: true });
-      } else {
-        await commands.setPlaceholder(placeholderTip.current);
-      }
-    }, 1000);
+      timers.current["editor:loaded"] = setTimeout(async () => {
+        if (!state.current.ready && (await onReady())) {
+          state.current.ready = true;
+        }
+        if (currentNote.current) {
+          loadNote({ ...currentNote.current, forced: true });
+        } else {
+          await commands.setPlaceholder(placeholderTip.current);
+        }
+      });
+    });
   }, [
     onReady,
     postMessage,

packages/editor-mobile/src/components/editor.tsx

@@ -236,7 +236,9 @@ const Tiptap = ({ settings }: { settings: Settings }) => {
             <Toolbar
               className="theme-scope-editorToolbar"
               sx={{
-                display: settings.noToolbar ? "none" : "flex"
+                display: settings.noToolbar ? "none" : "flex",
+                overflowY: "hidden",
+                minHeight: "50px"
               }}
               editor={_editor}
               location="bottom"