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

4 Replies

Unknown User•2y ago

Message Not Public

SarguelOP•2y ago

Hello, I did check lazy component prior to this post. If you mean:

const Greeting = lazy(() => import("./greeting"));

const Greeting = lazy(() => import("./greeting"));

It does what I want, but only once. As soon as the component is loaded once, it does not show the loading indicator for the next loading.

SarguelOP•2y ago

here an example to illustrate: https://playground.solidjs.com/anonymous/5066b5ac-e30b-48a3-a811-3e4c92b8f30e

Solid Playground

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

Unknown User•2y ago

Message Not Public

Gaming

Programming

Waiting for big component