Optimistically mounted component appears before its dynamic style is applied
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- Half a day
- Newbie friendliness
- 65/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- javascript, typescript
- Domain
- frontend
Research direction
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.
Written by the indexing model from the issue text.
Description
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
- Open the playground and click Run once.
- During the two-second action, observe that Hello appears in the default black color. Inspecting its element shows no
styleattribute. - 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.
- Dominant language
- TypeScript
- Stars
- 36.1k
- Forks
- 1.1k
- Avg merge
- 11h 25m
- Merged PRs (30d)
- 345
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from solidjs/solid
-
Difficulty 4/5 3-5 days Newbie friendliness 35/100
Maintainers usually reply within 1 day
-
Difficulty 5/5 Over a week Newbie friendliness 12/100
Maintainers usually reply within 1 day
-
Select loses its bound value when options load asynchronouslyPossibly taken @MokiMeow claimed this today. Open
Difficulty 3/5 Half a day Newbie friendliness 45/100
solidjs/solid#3928 · 1 comment ·
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 18/100
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 24/100
solidjs/solid#3923 · 1 comment ·
Maintainers usually reply within 1 day
Similar issues
-
Difficulty 1/5 1-3 hours Newbie friendliness 84/100
Maintainers usually reply within 1 day
-
core
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
vectorize-io/hindsight#5457 ·
Maintainers usually reply within 1 day
-
beginner friendly community contributions-welcome good first issue hacktoberfest help wanted testing up-for-grabs
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 85/100
lukilabs/beautiful-mermaid#160 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
rescript-lang/rescript-lang.org#1420 ·
Maintainers usually reply within 2 days