uiwjs / react-codemirror

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

Improving `Largest Contentful Paint` time? #673

Open jparismorgan opened 1 month ago

jparismorgan commented 1 month ago

Hi there, I'm using this library for https://www.timecomplexity.ai, and it's working nicely, so thank you for that!

One issue I'm seeing though is that the Largest Contentful Paint time is quite high because of this library:

Screenshot 2024-07-14 at 3 22 05 PM

Curious if you have any suggestions on how to improve this? I'm using it in a next.js site hosted on Vercel like this:

import CodeMirror from '@uiw/react-codemirror'
import {go} from '@codemirror/legacy-modes/mode/go'
import {xcodeDarkInit} from '@uiw/codemirror-theme-xcode'

export default function Analysis() {
  return (
      <CodeMirror
            value={inputCode}
            placeholder={'Use AI to analyze your code\'s runtime complexity.\nWorks across languages and without requiring headers, imports, or a main statement - just the code itself.\nPlease note that results may be incorrect in subtle (or not so subtle) ways, so use at your own risk!'}
            autoFocus
            editable={!loading}
            minHeight="300px"
            extensions={[
              StreamLanguage.define(go),
              EditorView.lineWrapping
            ]}
            theme={xcodeDarkInit({
              settings: {
                fontFamily: inputCode.length === 0 ? 'var(--font-inter)' : ''
              }
            })}
            onChange={(value: any) => {
              if (value.length > MAX_CODE_LENGTH) {
                setErrorMessage(`Please enter code less than ${MAX_CODE_LENGTH} characters. You are currently at ${value.length} characters.`)
              } else if (typeof errorMessage !== 'string' || typeof errorMessage === 'string' && errorMessage.length !== 0) {
                setErrorMessage('')
              }
              setInputCode(value)
            }}
          />
    )
 }
jaywcjlove commented 1 month ago

@jparismorgan I don't know what the issue is. How can it be reproduced?

jparismorgan commented 1 month ago

@jaywcjlove you can generate a Lighthouse score on https://uiwjs.github.io/react-codemirror for example using Chrome Developer Tools. I checked and see Largest Contentful Paint 3.1s there:

Screenshot 2024-07-23 at 10 22 24 AM