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:
Any hints?
- 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?
