fix: lazy load embedded files in super editor (#2043)

packages/web/src/javascripts/Components/NoteView/NoteView.tsx

@@ -953,7 +953,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
           )}
 
           {editorMode === 'super' && (
-            <div className={classNames('blocks-editor w-full flex-grow overflow-hidden overflow-y-scroll')}>
+            <div className={classNames('blocks-editor w-full flex-grow overflow-hidden overflow-y-auto')}>
               <SuperEditor
                 key={this.note.uuid}
                 application={this.application}

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/Nodes/FileComponent.tsx

@@ -1,5 +1,5 @@
 import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { ElementFormatType, NodeKey } from 'lexical'
 import { useApplication } from '@/Components/ApplicationView/ApplicationProvider'
 import FilePreview from '@/Components/FilePreview/FilePreview'
@@ -19,13 +19,47 @@ export function FileComponent({ className, format, nodeKey, fileUuid }: FileComp
   const application = useApplication()
   const file = useMemo(() => application.items.findItem<FileItem>(fileUuid), [application, fileUuid])
 
+  const [canLoad, setCanLoad] = useState(false)
+
+  const blockWrapperRef = useRef<HTMLDivElement>(null)
+  const blockObserver = useMemo(
+    () =>
+      new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              setCanLoad(true)
+            }
+          })
+        },
+        {
+          threshold: 0.25,
+        },
+      ),
+    [],
+  )
+
+  useEffect(() => {
+    const wrapper = blockWrapperRef.current
+
+    if (!wrapper) {
+      return
+    }
+
+    blockObserver.observe(wrapper)
+
+    return () => {
+      blockObserver.unobserve(wrapper)
+    }
+  }, [blockObserver])
+
   if (!file) {
     return <div>Unable to find file {fileUuid}</div>
   }
 
   return (
     <BlockWithAlignableContents className={className} format={format} nodeKey={nodeKey}>
-      <FilePreview file={file} application={application} />
+      <div ref={blockWrapperRef}>{canLoad && <FilePreview file={file} application={application} />}</div>
     </BlockWithAlignableContents>
   )
 }