search

uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.69k stars 135 forks source link

Display skeleton before render #674

Open haaarshsingh opened 4 months ago

haaarshsingh commented 4 months ago

I'm having a bunch of layout shift because this editor renders in after the rest of my components. How can I know if it has loaded or not so I can display a skeleton or something?

jaywcjlove commented 4 months ago

@harshhhdev Do you need an effect like this? I think this requires implementation on your part.

<Skeleton loading={loading}>
     <CodeMirror value={goLang} height="200px" extensions={[StreamLanguage.define(go)]} />
</Skeleton>
haaarshsingh commented 4 months ago

@jaywcjlove yessir, exactly like that. How should I go about making the loading implementation myself though? 🤔

jaywcjlove commented 4 months ago

Do I need to add a componentDidMount prop?