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

Optimistically mounted component appears before its dynamic style is applied

Abierto
  • ¿Algo no está bien?
#3,835 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
Medio día
Aptitud para principiantes
65/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, typescript
Área
frontend

Línea de trabajo

Start from the optimistic mounting and memo implementation in the rendering pipeline. The issue involves createMemo and style application during optimistic renders. Use the playground reproduction to verify the behavior. The fix should ensure the component either waits for styles before mounting or uses the committed signal value for the initial render.

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

Descripción

Describe the bug

An optimistically mounted component reveals its static text before applying its dynamic style.

The component returns a memo containing an element whose color is always either red or blue. Its style and an inner conditional read the same non-optimistic signal. While an action holds that signal's update, clicking Run reveals <div>Hello</div> with no style attribute. After two seconds it becomes <div style="color: blue;">Hello world</div>.

The issue is the unstyled intermediate element, not that the blue update waits for the action.

Your Example Website or App

https://s.olid.uk/id/cu5JVqDbSkWlmoERReb30Q

Steps to Reproduce the Bug or Issue
  1. Open the playground and click Run once.
  2. During the two-second action, observe that Hello appears in the default black color. Inspecting its element shows no style attribute.
  3. When the action finishes, the text becomes Hello world and the blue style is applied.
Expected behavior

Either keep the child held until it can render consistently, or reveal it using the committed signal value (false, so red). Revealing the element without either declared color is inconsistent.

Screenshots or Videos

No response

Platform
  • OS: Linux (WSL)
  • Browser: Chromium 153.0.8010.12
  • Solid: preview build 3ab71b0 (solid-js, @solidjs/web, and @solidjs/signals)
Additional context

Removing the component's createMemo wrapper or replacing its inner conditional text with static text avoids the unstyled intermediate element. The repro uses only signals, an optimistic signal, an action, and a real timer; Tailwind is disabled.

Lenguaje dominante
TypeScript
Estrellas
36.1k
Forks
1.1k
Merge medio
13 h 13 min
PR fusionados (30 d)
306

Preparar el entorno

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 solidjs/solid

Todos los issues de solidjs/solid

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.