2.0.0-beta.4 Mounting a Loading using a Show with callback children loads forever

[GabbeV]

Describe the bug

The following code results in Loading... forever while rerunning the async work in Component continuously.
<Show when={show()}>{() => <Loading fallback="Loading..."><Component /></Loading>}</Show>

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-tp2qog8w?file=src%2FApp.tsx

Steps to Reproduce the Bug or Issue

1. Open repro
2. Click button
3. Observe the Loading... text never going away and "async" getting logged to the console every second

Expected behavior

The Loading boundary reveals once all async work is done.

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome, Firefox

Additional context

No response

[ryansolid]

You are going to not like the answer here. And it is really unfortunate TS cant help us out here. But in order to support non callback versions of show which directly take accessors we need to look at function arrity to determine if it is a callback. Ie your example is fixed if you either remove the function callback or give it an argument. This isnt a new issue. We've had this since the beginning and Ive never found a solve.

The problem with accesspr form is it geys passed through and deeply unwrapped at the same scope causing it to create and read at the same scope creating the loop. We could maybe detext and mitigate by injecting an addititional wrapper, but it doesnt change tge fact we arent rreating what you wrote as a proper untracked callback. We mention this in the docs but it is definitely non obvious.

[kanashimia]

And it is really unfortunate TS cant help us out here.

@ryansolid I think that is solvable:

type NonZeroParams<T extends (...args: any[]) => any> = Parameters<T>["length"] extends 0 ? never : T;

export declare function Show<T, F extends ((item: Accessor<NonNullable<T>>) => JSX.Element)>(props: {
    when: T | undefined | null | false;
    keyed?: boolean;
    fallback?: JSX.Element;
    children: JSX.Element | NonZeroParams<F>;
}): JSX.Element;

Even though some JSX elements are functions at runtime, types as is don't seem to represent them as functions anyway, so the above solution seems to work unless I'm missing something.
Well, if it is actually common and required to pass () => JSX.Element then that wont work....
What do you think?

For some reason looking at the jsx types there seems to be a difference between hyperscript and jsx versions of Element type in that aspect: https://github.com/ryansolid/dom-expressions/blob/96bce81c8468ea951cd5a943838b9621975bf906/packages/dom-expressions/src/jsx-update.mjs#L5

[GabbeV]

That makes sense. Seems like the fix would be that the callbacks generated by JSX are marked as such so Show can differentiate. Either by wrapping or an added property. However I guess this isn't really a bug then and more of a works as intended quirk so I'll close the issue.