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>
  );
}