Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Improving `Largest Contentful Paint` time?

Abierto
  • ¿Algo no está bien?
#673 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
25/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
next.js, react, typescript
Área
frontend, performance

Línea de trabajo

Comienza con el uso de CodeMirror mostrado en el issue y perfila su impacto en Largest Contentful Paint en la configuración de Next.js y Vercel descrita. Compara el comportamiento de carga y renderizado del editor con la medición de LCP de la página; el trabajo estará terminado cuando se identifiquen una causa reproducible y una mejora claramente validada.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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)
            }}
          />
    )
 }
Lenguaje dominante
TypeScript
Estrellas
2.3k
Forks
162
Merge medio
2 h 41 min
PR fusionados (30 d)
1

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de uiwjs/react-codemirror

Todos los issues de uiwjs/react-codemirror

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.