Inexplicable trigger of Suspense

[petercockerell-brt]

Describe the bug

I was playing with one of the examples in Sinan Polat's excellent book about Solid, and I came across some behavior that I don't understand. There's a component nested in a Suspense. If I make the body of the component

 <div>
      data1: {data1.state === "ready" ? data1() : "waiting"}
 </div>

the Suspense triggers immediately, and you see the waiting text until it's replaced by the result of the data1() resource (an integer) when the resource becomes ready. However, if you add another, unconditional call to data1(), like this:

 <div>
      data1: {data1.state === "ready" ? data1() : "waiting"}: {data1()}
 </div>

(or only have the unconditional call to data1()), the Suspense behavior is as expected, and you don't see the component at all until the resource becomes ready.

You can play with the full code here: https://playground.solidjs.com/anonymous/4a5900ee-13a1-411e-8f2c-2156231756ee

Your Example Website or App

https://playground.solidjs.com/anonymous/4a5900ee-13a1-411e-8f2c-2156231756ee

Steps to Reproduce the Bug or Issue

1. Run the code in the playground link and notice that both the inner and outer Suspense trigger immediately.
2. Uncomment the extra data1() call at the end of the body of Data, and notice that now the Suspense doesn't trigger until the resource is ready.

Expected behavior

I would expect the Suspense not to trigger until the contained resource(s) are all in the ready state, but this isn't the case.

Screenshots or Videos

No response

Platform

• OS: MacOS 14.2
• Browser: Chrome
• Version: Chrome 131, Solid 1.9.3

Additional context

No response

[ryansolid]

Yeah I see the misunderstanding. The first behavior you are seeing isn't Suspense behavior. Basically by reading the ready state you are not reading from the resource value so it doesn't Suspend and it shows waiting whereas when you read directly from the resource data1() it Suspends at the nearest Suspense boundary which displays "Loading Children".

You could also get the same UI by nesting Suspense boundaries: https://playground.solidjs.com/anonymous/6e7ac01c-bfce-4644-aebc-df889f4540cb

[petercockerell-brt]

Oh, yeah, I definitely missed that: you have to dereference the resource function to invoke the Suspense behavior. Thanks for the clarification. The reason I was guarding it by reading state in the first place was to avoid throwing if the resource had errored (though that didn't make it into my example). I guess I'd have to handle that with an ErrorBoundary instead.