Waiting for big component

Hello, I want to wait for a big synchronous component to render while rendering everything else around.

After trying:

 <Suspense fallback={<div>Loading ...</div>}>
   <BigComponent/>
</Suspense>

 <Suspense fallback={<div>Loading ...</div>}>
   <BigComponent/>
</Suspense>

The only solution I could came up with was to wrap it in a component that "make it" async as such:

const AsyncComp = (props: ParentProps) => {
    const [asyncify] = createResource(() => new Promise((resolve) => setTimeout(() => resolve(props.children), 0)));
    return <>{asyncify()}</>;
}

const AsyncComp = (props: ParentProps) => {
    const [asyncify] = createResource(() => new Promise((resolve) => setTimeout(() => resolve(props.children), 0)));
    return <>{asyncify()}</>;
}

working example: https://playground.solidjs.com/anonymous/0caaf54b-4be7-4013-ae34-e36f73afcbb6

Is there no better way to achieve this goal ?

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

SolidJS•3y ago•

4 replies

Sarguel

Waiting for big component

Hello, I want to wait for a big synchronous component to render while rendering everything else around.

After trying:

 <Suspense fallback={<div>Loading ...</div>}>
   <BigComponent/>
</Suspense>

 <Suspense fallback={<div>Loading ...</div>}>
   <BigComponent/>
</Suspense>

The only solution I could came up with was to wrap it in a component that "make it" async as such:

const AsyncComp = (props: ParentProps) => {
    const [asyncify] = createResource(() => new Promise((resolve) => setTimeout(() => resolve(props.children), 0)));
    return <>{asyncify()}</>;
}

const AsyncComp = (props: ParentProps) => {
    const [asyncify] = createResource(() => new Promise((resolve) => setTimeout(() => resolve(props.children), 0)));
    return <>{asyncify()}</>;
}

working example: https://playground.solidjs.com/anonymous/0caaf54b-4be7-4013-ae34-e36f73afcbb6

Is there no better way to achieve this goal ?

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Waiting for big component

Similar Threads

Waiting for big component

Similar Threads

Similar Threads

Similar Threads