cumulative layout shift while loading

[YoniChechik]

while initally loading the component we start with no placeholder div which causes layout shift. This can even be seen when reloading the demo site:
https://uiwjs.github.io/react-codemirror/

is there a way to fix this?

[jaywcjlove]

@YoniChechik I have no way to reproduce the problem you describe.

[YoniChechik]

Added a gif example:

[jaywcjlove]

@YoniChechik https://codesandbox.io/embed/react-codemirror-example-codemirror-6-https-github-com-uiwjs-react-codemirror-issues-523-6tv4zq?fontsize=14&hidenavigation=1&theme=dark

Not sure if it's what you want.

[jaywcjlove]

import React, { useEffect, useState } from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";

export default function App() {
  const [loading, setLoading] = useState(true);
  const [text, setText] = useState('console.log("xx")');
  const onChange = React.useCallback((value, viewUpdate) => {
    console.log("value:", value);
  }, []);
  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
      setText("function() {}");
    }, 2000);
  }, []);
  return (
    <div
      className={loading ? "loading" : ""}
      style={{ border: "1px solid red" }}
    >
      <CodeMirror
        value={text}
        height="200px"
        theme="dark"
        extensions={[javascript({ jsx: true })]}
        onChange={onChange}
      />
    </div>
  );
}

[colsondonohue]

@jaywcjlove reviving this old issue - I'm experiencing the same thing. As @YoniChechik points out, it's visible on the docs site. I think it's a basic problem with the library, because value is set in an effect, which is dependent on two other effects running: https://github.com/uiwjs/react-codemirror/blob/master/core/src/useCodeMirror.ts#L158-L169.

I.e. right now this code:

1. initializes container in an effect and triggers a re-render
2. initializes view in an effect and triggers a re-render
3. in a third effect, is able to mutably update view with the value from props

So after ReactCodeMirror mounts, there's 3 render cycles before it becomes populated with whatever value is provided, resulting in this flash.

Some thoughts:

• It's not clear to me why we need state for container at all - could we just use the prop directly?
• Can we initialize state and view in their respective useState calls using the useState(() => createMyExpensiveState()) syntax? Essentially copying the body of this effect https://github.com/uiwjs/react-codemirror/blob/master/core/src/useCodeMirror.ts#L88-L115
  • Furthermore, could they be one atomic piece of state? not 100% sure but it seems like they should change together

I'm coming in blind to this library so I'm not sure if there are specific reasons it was written this way, but would appreciate you taking another look at this. Also happy to take a stab at a PR if you're amenable :)

[jaywcjlove]

Hi @colsondonohue ,

Thanks for bringing this up! I appreciate your insights and suggestions. Feel free to submit a PR to address the issue – I’d be happy to review it and merge the fix.

Looking forward to your contribution!

[colsondonohue]

@jaywcjlove #717 here you go :)