JSX does not wait for transitions to complete when using a ternary in a prop value

[Tonius]

Describe the bug

When using a ternary expression as part of a prop value in JSX, transitions do not seem to work properly. The DOM is updated immediately, instead of waiting until all resources in the transition are resolved.

When not using a ternary, or moving it to a derived signal outside of the JSX, the transition works correctly.

Your Example Website or App

https://playground.solidjs.com/anonymous/f17b29b5-34f9-4cc5-af35-64c92380def3

Steps to Reproduce the Bug or Issue

1. Click the 'Increment' button a few times to see how the rendered counts change.
2. Under 'Without ternary', the counts are updated in sync, and the transition works as intended.
3. Under 'With ternary', the counts are updated independently, without waiting for both resources to be resolved.

Expected behavior

Under both 'Without ternary' and 'With ternary', the counts should wait for both resources to be resolved before updating the DOM.

Screenshots or Videos

No response

Platform

• OS: Linux (Arch)
• Browser: Firefox
• Version: 125.0.3

Additional context

No response

[ryansolid]

This issue is probably a duplicate of: #1781.

The problem is that the memo wrapping of the ternary isn't being read until in the renderEffect which is too late for the transition. Solid 2.0's design accounts for this specifically.

[Tonius]

Solid 2.0 looks promising, from what I've seen it will bring many improvements in the async department.

So for now, it is better to avoid this pattern when reading resources that are part of a transition? Are there any other patterns to be aware of, that can have this problem?

[ryansolid]

Yeah ternaries can be resolved inside out. It and boolean expressions are probably the only ones that apply that sort of optimization in the JSX that leads to that. They didn't always but I had changed it to fix another bug... the way we do normalization of insertion just needs to change in general.

Other than that you don't want to read resources only effects. This almost never comes up but by that time it is too late. I guess this is true for Suspense as well so it isn't unique to Transitions. But a resource needs to be read in a computation (memo) or direct in JSX to trigger stuff. It can also be read in effects but it is the pure/immediate stuff that triggers suspense/transitions.

[ryansolid]

Anyway I'm going to track the single issue. Thanks for reporting and I'm looking forward to getting this more streamlined.