Loading Skeleton for Search & Pagination in NextJs 13 Movie App

In this video, we'll use Suspense to add a loading skeleton to our movie app during search and pagination. We'll also learn about the Router cache and how to invalidate it to show our pending UI.

👉🏼 The Ultimate NextJs Course

👉🏼 Project source code

Chapters
0:00 Intro
1:26 Project setup
2:30 Extract movies into a component
4:40 Add Suspense
7:10 Invalidate the Router cache
14:30 Add key to page component
16:15 Add loading skeleton
17:30 Add the Await component
21:46 Outro

[AdilChehabiChkilel]

Thanks a lot Hamed, I struggled with that and gave up after hours of searching and reading the doc.
Your way of explaining complex concepts is the best I've ever seen, in every tutorial I found you answering all the questions that are in my head 👍.

[PrafulKarmur-lk]

wow it's really to help full i spend hour's and hours but you give solution within 10 minutes thank's a lot, you make video on real problems of work issue that's really very helpful to us

[amir]

What a perfect tutorial. Amazing. I wish i knew your channel earlier

[germain]

Love your videos! Learned a lot from your section on router caching. Would be amazing if you could make one video summarizing all of the Caching behavior in Next.js 13.4+ as I believe that is the single biggest headache in the new Next.js

[any_account-bx]

Another great video which helps me a lot, thank you! However I don't know what would be the best solution to retrieve the total amount of pages for the pagination? Should I fetch the total pages with another endpoint outside of the suspense? Maybe you know a better answer 🙂

[ekimdev]

Thank you so much for the information thats really useful. Can i ask a question here, since we are "disabling" client cache in browser by adding key, it will not affect the server cache right if we send request with native fetch api and cache set to "force-cache" ?

[ekimdev]

Await method is cool !can we promise.all 2 different promises and await both of them in await function ?

[zhiven]

Nice Video!! This is an optimistic situation, but how to handle error if the server action data fetching return something error?

[liu-river]

So this is great, but when the images come in, you can see there is a fraction of second of gray background before the images appear, but the text is instant. Is there a way to avoid that so the image and text appear at the same time? I guess what I mean is like how Unsplash shows a blur image while loading.

[hey.............]

Hey, really informative. One question though, lets say i have 3 api calls on my page component. I want one call to be revalidated after every 45 seconds and want to pass the result of this call to 2 other calls on this page. For these 2 calls i want to disable caching and as i am using next.js extended fetch api. I set cache:no-store. Now if i switch between pages, i see my data is stale. I will try setting key attribute, but if i set key attribute does caching works for my first api call?

[deepanshuverma]

Its working in Devlopment mode but when prodcution fallback is not showing

[tomassabol]

isn't this solution going to introduce hydration errors?

[AhmedYasser-nolc]

When disable js in browser, display skeleton loading page, how when disable js, show skeleton and data or display data only when disable js

[mehdifada-yi]

merci ke enghad khobi mishe rajebe kar ba headlessUi ham video besazi