TanStackT
TanStack•3y ago
wet-aqua

Lazy component load with suspend data loader?

I want to combine to functions:
- lazy component loading with: lazyRouteComponent
- Suspense tag with Await tag.
I try it with this code, but nothing happens:
export function showLazyComponent<T extends object, E extends Record<string, unknown>>(entity: DeferredPromise<T>, path: string, componentFn: (entity: T, isLoading: boolean, element: AsyncRouteComponent<E>) => JSX.Element) {
    const Element = lazyRouteComponent<E>(() => import(path))
    return <Suspense fallback={componentFn({} as T, true, Element)}>
        <Await promise={entity}>
            {(entity: T) => {
                console.log("Loaded with", Element)
                const lazyComp = componentFn(entity, false, Element)
                return lazyComp
            }
            }
        </Await>
    </Suspense>
}

Any hints?
Was this page helpful?