T
TanStack•3y ago
national-gold

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>
}
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?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?