here is a part of the code i use

loading a lot of images/data initial is always kind of challenging. I dont know your complete code and data structure, but if you don't have any way to load your data step by step (virtualization), then maybe show something different in the initial loading process and save the images and data in a local storage like zustand or something else to avoid refetching every time the user reload/navigate to the page

Alr thanks will try it out

I think your main issue here is that you are not caching the searching of the items

try the following:
1. cache the initial getItems() function
2. load images at lower resolution using width and height
3. mess around with blurry image loading so you have something to show the user while the higher resolution is loading blurDataURL

https://nextjs.org/docs/app/getting-started/images#remote-images

Alr really thx

I will code in a few hours

So i will leave a respond if it helped a bit

i have updated it with a loading screen let me know if this is the right way @Little Shearwater and @Sun bear if you want its in the website now https://www.skinvaults.online

@XottikMW | skinvaults.online a loading screen is fine for UX, but doesnt really solve the core problem. if the images are still refetched every time the user refreshes or navigates, the loading time will stay high -> bad for UX. you should definitely cache the images to avoid that overhead.

also, it might be worth rethinking your data structure a bit, so you dont have to load all items each time. ideally, youd structure it in a way that lets you fetch only the data thats actually needed (if this is currently not possible in your structure)