Loading UI with Next.js 13 and React Suspense

Thx!!! That's what I've been looking)

what if I am using pages routing within a nextjs 13 project, is loading.js available?

For a long time I could not understand why loader does not work. It turned out my data was in the cache!

do you have the repo only for example

loving the way loading works. You just create a new file with loading and booms done.....

why on earth not to use mouse
this is so funny to watch this "hackers"

Thanks, but you are in local development right? It means the fetch happens at every request.
But in production, you will not see it I belive right?

Thank you!
How to implement a "See more" button behaviour with a next js server component ?

Sadly there's no way to show any feedback when executing a server action, and the data is being streamed. It seems it's not possible to add hooks to the streaming life-cycle.

For example, if I have a list of users, execute a server action for "adding a user" (which executes revalidatePath), then I can show a loading spinner during the duration of the action, but once the action is done, the spinner will disappear, and there's no way to know when the new data will arrive (which can be several seconds after the spinner disappeared).

this is amazing

if u follow this approch and the add the new post the data will not show instantly : unfortunately

i need help with loading state. can someone help with me?

So all I have to do is add in a loading.tsx? I don’t have to wrap the layout in anything?

Amazing technology. For Seo, will the list of posts be empty when a google bot crawls it? If I want the posts to be available for the google bot crawlers do I still need to do a static page?

Amazing video thanks so much.

Thank you. But loading works only during render SSR files. But if i'm using client side properties for change status of certain elements and during refresh or first load it shows all unstyled elements till all page has been loaded, and my loading page doesn't work. Do you have some advice please?

👯

Hi, i can't use loading.js in subfolder(for components)
please add this option
with this option we can make different loadings for each component

💕 💞

Really cool, but I still prefer to use nprogress. Makes it better for users to see loading progress

so no conditional checking for isLoading or error state? can we just call the api with no try catch a bit confused

Do you have to be using the new app directory for this? It's not working on my project but I am not using the app directory since they say that it's still not production ready.

What's better than solider boy teaching us Next.js.

thank u this is very usefull

We have arrived at 2014 Ember.js… fitting that Sam is presenting!

Damn, this stuff is amazing. I think we're finally settling down with the hybrid applications & awesome UX.

Great video! Could you by any chance share the code for this example? Would appreciate it!

First of all, great voice... but, I am very confused about this. This is what it says in the docs "Good to know: Previous Next.js data fetching methods such as getServerSideProps, getStaticProps, and getInitialProps are not supported in the new app directory." so how are we able to use that here under the app dir?

Does the SSR-Route work without enabled JavaScript with that new Next 13 approach?

when use loading.tsx, does the SEO crawler can get the post content?

I actually prefer a progress bar on the top of the page over this, which works with the "old" approach as well.

You JS devs need to give Blazor a try.
Writing web apps front to back in a statically typed language is a dream come true.

Leave this mess and come to the better side. 🤗

power!!

So how to reuse this loading file? like as React? is it possible here?

I actually tested and i will use it on my personal web.
Thank you.

Wow that's super cool ❤

Can we get the full className of the span element, the loading animation looks great! Thanks

Nice sound

i cant believe this is new to next, while nuxt have this 3years ago

im just thinking, about if we have multiple load data, we need also 1 by 1 loading state on each section.
do we need to copy and paste the template or any magic things to do it ?

Nice clean explanation, thank you! Any chance you could show us how to integrate these features with Framer Motion for some sleek page-loading-page transitions @samselikoff ?

When to use getstaticprops and Async function ? I am building my pages in Page Folder not in App folder

GoodJob!

so sick

Inspired by remix

I don't see any step that you use Loading component with Suspense causes a little bit confused here

I thought getServerSideProps, getStaticProps, getStaticPaths are gone.

Could you share repo?

It was quite easy to make a loading indicator with next 12 by utilizing `router.events.on('routeChangeStart' | 'routeChangeComplete')`. This loading indicator would not replace the whole content instantly. I think the solution presented here is a worse UX.

Is there a way to have the same effect in a next 13 app directory? The router you get from the `useRouter` hook of "next/navigation" has no events.