Fire event when NodeView underlying DOM element is inserted into DOM

I’m using NodeView to render React component which is using react-lazy-load package inside. The code looks like this:

https://bitbucket.org/atlassian/atlaskit/src/dbadad6df5536ce5ad686aee8bc1df41f338d8e6/packages/editor-core/src/nodeviews/factory.tsx?at=master&fileviewer=file-view-default

The problem is that react-lazy-load checks whether its DOM element is inside the document or is in the viewport and renders children in this case. Otherwise it renders an empty div. When NodeView’s “dom” is accessed, it’s not in the DOM yet, but react-lazy-load has already rendered its content there.

Is there any way to know whether “dom” element has been injected into the document? I can see that prosemirror-view is using MutationObserver for selection checks (https://github.com/ProseMirror/prosemirror-view/blob/master/src/domobserver.js) but it’s not documented and it’s probably not intended for this. Maybe providing a separate handler to EditorView like “handleDOMMutation” would be great. What do you think?

I’d say that this is a context in which react-lazy-load simply doesn’t work, and my suggestion for solving it would be to find a way to disable react-lazy-load in the component, rather than hacking around its behavior.

I can definitely do this. The problem is that we want to use this component in the editor because there will be huge texts in the editor with lots of images in it and we want to utilize react-lazy-load to optimize the loading time for users.

1 Like

@1999 Have you solved the problem meanwhile or rejected?

@davidka sorry, I missed your question. We stopped using lazy load.

So how did you solve your performance issues?