Hey all, I have a server side component that takes a while to load images. Is there a wait to show a loading screen until all images are loaded?I tried just adding around it but it didn't work {filtered_products.slice((currentPage-1)*PAGE_SIZE, currentPage*PAGE_SIZE).map(product => )}

Wait until images are loaded to show component?

Answered

berkserbet posted this in #help-forum

2024-02-14T21:38:45.000Z

Hey all, I have a server side component that takes a while to load images. Is there a wait to show a loading screen until all images are loaded?

I tried just adding <Suspense> around it but it didn't work

<div className="grid grid-cols-2">
  {filtered_products.slice((currentPage-1)*PAGE_SIZE, currentPage*PAGE_SIZE).map(product => <ProductCard product={product} key={product.id} />)}
</div>

Answered by not-milo.tsx

You can leverage the [onLoadingComplete](https://nextjs.org/docs/app/api-reference/components/image#onloadingcomplete) prop to toggle a loading screen when an image finished loading. You'd have to use some form of global state management (React context api, Zustand, Redux, whatever...) to wait untill all images have finished loading and do what you need to.

View full answer