Faster page load: delay rendering codemirror until in view (#2885)

fonsp · Apr 11, 2024 · 6a61511 · 6a61511
1 parent 50582a1
commit 6a61511
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 4 deletions.
diff --git a/frontend/components/CellInput.js b/frontend/components/CellInput.js
@@ -367,6 +367,7 @@ export const CellInput = ({
     cm_forced_focus,
     set_cm_forced_focus,
     show_input,
+    skip_static_fake = false,
     on_submit,
     on_delete,
     on_add_after,
@@ -421,9 +422,42 @@ export const CellInput = ({
         }, [on_change])
     )
 
-    useLayoutEffect(function cellinput_setup_codemirror() {
+    const [show_static_fake_state, set_show_static_fake] = useState(!skip_static_fake)
+
+    const show_static_fake = cm_forced_focus != null || skip_static_fake ? false : show_static_fake_state
+
+    useLayoutEffect(() => {
+        if (!show_static_fake) return
+        let node = dom_node_ref.current
+        if (node == null) return
+        let observer
+
+        const show = () => {
+            set_show_static_fake(false)
+            observer.disconnect()
+            window.removeEventListener("beforeprint", show)
+        }
+
+        observer = new IntersectionObserver((e) => {
+            if (e.some((e) => e.isIntersecting)) {
+                show()
+            }
+        })
+
+        observer.observe(node)
+        window.addEventListener("beforeprint", show)
+        return () => {
+            observer.disconnect()
+            window.removeEventListener("beforeprint", show)
+        }
+    }, [])
+
+    useLayoutEffect(() => {
+        if (show_static_fake) return
         if (dom_node_ref.current == null) return
 
+        console.log("Rendering cell input", cell_id)
+
         const keyMapSubmit = (/** @type {EditorView} */ cm) => {
             autocomplete.closeCompletion(cm)
             on_submit()
@@ -843,7 +877,7 @@ export const CellInput = ({
                 lines_wrapper_resize_observer.unobserve(lines_wrapper_dom_node)
             }
         }
-    }, [])
+    }, [show_static_fake])
 
     useEffect(() => {
         if (newcm_ref.current == null) return
@@ -922,6 +956,7 @@ export const CellInput = ({
 
     return html`
         <pluto-input ref=${dom_node_ref} class="CodeMirror" translate=${false}>
+            ${show_static_fake ? (show_input ? html`<${StaticCodeMirrorFaker} value=${remote_code} />` : null) : null}
             <${InputContextMenu}
                 on_delete=${on_delete}
                 cell_id=${cell_id}
@@ -1088,3 +1123,31 @@ const InputContextMenuItem = ({ contents, title, onClick, setOpen, tag }) =>
             <span class=${`${tag} ctx_icon`} />${contents}
         </button>
     </li>`
+
+const StaticCodeMirrorFaker = ({ value }) => {
+    const lines = value.split("\n").map((line, i) => html`<div class="awesome-wrapping-plugin-the-line cm-line" style="--indented: 0px;">${line}</div>`)
+
+    return html`
+        <div class="cm-editor ͼ1 ͼ2 ͼ4 ͼ4z cm-ssr-fake">
+            <div tabindex="-1" class="cm-scroller">
+                <div class="cm-gutters" aria-hidden="true">
+                    <div class="cm-gutter cm-lineNumbers"></div>
+                </div>
+                <div
+                    spellcheck="false"
+                    autocorrect="off"
+                    autocapitalize="off"
+                    translate="no"
+                    contenteditable="false"
+                    style="tab-size: 4;"
+                    class="cm-content cm-lineWrapping"
+                    role="textbox"
+                    aria-multiline="true"
+                    aria-autocomplete="list"
+                >
+                    ${lines}
+                </div>
+            </div>
+        </div>
+    `
+}
diff --git a/test/frontend/helpers/pluto.js b/test/frontend/helpers/pluto.js
@@ -256,6 +256,7 @@ export const runAllChanged = async (page) => {
  * @param {string} text
  */
 export const writeSingleLineInPlutoInput = async (page, plutoInputSelector, text) => {
+    await page.waitForSelector(`${plutoInputSelector} .cm-editor:not(.cm-ssr-fake)`)
     await page.type(`${plutoInputSelector} .cm-content`, text)
     // Wait for CodeMirror to process the input and display the text
     return await page.waitForFunction(
@@ -294,7 +295,7 @@ export const keyboardPressInPlutoInput = async (page, plutoInputSelector, key) =
  * @param {string} plutoInputSelector
  */
 export const clearPlutoInput = async (page, plutoInputSelector) => {
-    await page.waitForSelector(`${plutoInputSelector} .cm-editor`)
+    await page.waitForSelector(`${plutoInputSelector} .cm-editor:not(.cm-ssr-fake)`)
     if ((await page.$(`${plutoInputSelector} .cm-placeholder`)) == null) {
         await page.focus(`${plutoInputSelector} .cm-content`)
         await page.waitForTimeout(500)
@@ -318,7 +319,7 @@ export const manuallyEnterCells = async (page, cells) => {
     for (const cell of cells) {
         const plutoCellId = lastElement(await getCellIds(page))
         plutoCellIds.push(plutoCellId)
-        await page.waitForSelector(`pluto-cell[id="${plutoCellId}"] pluto-input .cm-content`)
+        await page.waitForSelector(`pluto-cell[id="${plutoCellId}"] pluto-input .cm-editor:not(.cm-ssr-fake) .cm-content`)
         await writeSingleLineInPlutoInput(page, `pluto-cell[id="${plutoCellId}"] pluto-input`, cell)
 
         await page.click(`pluto-cell[id="${plutoCellId}"] .add_cell.after`)