Loading States are Killing Your User Experience
ฝัง
- เผยแพร่เมื่อ 21 พ.ค. 2023
- They are, man. But there's a way to handle them so gracefully. Let's look at which loading state pattern to avoid like the plague and THEN how to actually improve your UX with awesome loading states!
-- my links
My GitHub: github.com/joschan21
Discord: / discord - วิทยาศาสตร์และเทคโนโลยี
![[ไฮไลต์] แบดมินตันชาย วิว กุลวุฒิ ไทย vs ฟินแลนด์ รอบแบ่งกลุ่ม | โอลิมปิก 2024](http://i.ytimg.com/vi/GIbeFO0tvnQ/mqdefault.jpg)
NOOO I accidentally deleted the top comment trying to remove a spambot 😭😭 sorry to the person who wrote that, it was so kind too.
lol
ngl I was literally trying to make this work on my project! Thanks man!
I just found the channel few days back, and now I am addicted....❤❤❤❤
now I understand the suspense well, thanks josh 👊
It’s a pretty simple concept really with such a big payoff. Cheers dude!
🔥🔥🔥 man youtube was lacking u , hope u keep up the amazing vids and good luck on your way
That’s very nice of you, cheers man
When taking this approach, be very aware of layout shift. If the placeholder is not the same size as the final content it can lead to an even worse experience than loading everything server-side.
Thanks
You can place a ghost skeleton with css in the size of the actual content that is waited for and being loaded. Not really an issue, am I missing anything?
@@botan1996 But how do you know the height of the content? And if it changes you'll have to keep changing the height then...
Wow!! You really keep things simple man!! [... AWESOME]; Thank you very much!!
Super helpful - many thanks!
Happy to hear that. Cheers
Great introduction to Lazy Loading, here's what I think would be the next steps for intermediate to advanced Loading State handling:
1 ) Lazy Loading
2 ) React Query
3 ) Replicache-like product integration
I am curios about is there any place for react query in server components
@@heyjitendra I haven't tested this case, but i think that since one of react query's key feature is cache handling, it would be better to keep that part of data on the client for easy handling of cache invalidation
2) is awesome for handling client-loading behaviour. I feel like 1) is more about performance than it is about handling loading, but your points are great if you wanna get into making the UX even better
@@heyjitendra With some finagling you can fill up react query cache on the server and stream that to the client. I'm not sure how/if it works with app dir (yet, I'm sure when app is fully released and stable Tanner+team will think of something), but when using pages and getServerSideProps you can definitely do it. tRPC has this built in.
Granted that's not a server component but getServerSideProps, but again, when appDir is stable there will probably be some function you can call to prefetch query cache and stream that, so you'd get the benefits of both suspense/server components/ssr, and client side react query for refetching and mutations and all that.
TL;DR works great with /pages and getServerSideProps in nextjs, /app and server components will likely come soon
you are right.the first sucks. your solution is nice.thank you it was really helpful .i am taking your next courses .
Awesome as always
Cheers dude
hi ! is it necessary to not use material UI with next js inorder to take advantage of next js server components ? || because material UI needs to use a lot's of context providers such as the theme provider !!
So i would basically have to recreate a Image component which can be wrapped with a suspense right? what about handle it with state with onLoadingComplete to show a skelleton while waiting? It works with one image, but rendering an array of images is not working right for me as I am testing it right now.
+1 for the non-clickbait (and the content). Thank you
cheers!
Should we use the axios and react query in nextjs app directory OR native fetch?
Hi! I actually implemented something similar on my next app with Suspense and it works perfectly when I reload the page. However, whenever I navigate to the page from some other page, it still waits for all the data to fetch before showing me any content 😢.
Instead of a text saying Loading... you could also use a component for example" "and in the Loader component have for example a loading animation from Chakra UI
yessir. Personally prefer skeletons over loading spinners but I guess it's preference
@@joshtriedcoding i havent thought of using skeleton, good idea :)
I knew about the Suspense and Lazy loading
in react but i would never know i could use it this way
Data streaming is so badass. I feel like we're experiencing prime of web development
It really is. The current direction of web dev and react certainly is not without criticism (especially regarding server components) but the general tendency is awesome
Super cool. thanks :)!
You’re welcome champ
You're amazing man
Cheers dude
Great vid man thanks for sharing that knowledge. Those thumbs kinda sucks though 😅
This channel is REALLY underrated
cheers dude
Lol the way he was going on about thought it would be something more interesting than suspense 😂
Don’t you dare call suspense boring 🤨📸
didnt know about the react suspense component :b I do remember that the images has a lazy loading property as default as well (recommendation.tsx when returning an image)
At 04:05 I would highly recommend you write "export default Recommendation as unknown as (props: Props) => JSX.Element" instead of ignoring the typescript error.
Otherwise you also wont see any typescript errors if you pass invalid props to that component.
Latest Typescript beta supports async TSX Components 😊
Dope content!
thanks champ
Can you please teach about parallel routes and intercepting routes in the nextjs... I can't understand how it works
Forgive me if this is a stupid question; but what if you're working with a solution like hitting a rest API or using an ORM to get data where you might not know individual keys ahead of time (getting all posts from a database or getting all github repos from the github rest api) and you fetch all of your data at once anyway?
Thank You.
hey josh can you make video on authentication I next 13.4 with custom credentials provider and also how to make layout for admin routes and login route
amzing
Hey you should make a video on parallel routes and intercepting routes
Is there any use case you’d think fits well into a video?
Have /login rendered in a modal if the link has been clicked manually
@@joshtriedcoding Also an instagram-like post modal that's its own page when refreshed/linked directly
@@CanRau ah that is actually a cool use-case, cheers man
@@joshtriedcoding @Cau Rau Gave A Good Idea
banger
Can't we use Parallel route here? It's recommended in the docs too.
Awesome
loading states are killing your user experience so let's implement loading states XD
PROPER loading states!
Do you think React-Query still nessesary when NextJS is such powerful like this? NextJS + ReactQuery to me is a little bit overkilled. What is your opinions?
In my opinion absolutely not. React query is AWESOME in Next for any client-side data fetching. Love it. Goes super well together. I'd recommend giving it a shot, I think you might just like it too!
I’d still use React Query to fetch data from client events like on click or on submit for example. That being said, I think it’s difficult to find use cases for useQuery in Next JS
I wonder what benefits this has over client-side loading? I guess the benefit is that its a server component and thus less JavaScript is needed on the client. Anything else?
The whole thing about server components and their loading state was unclear to me for a pretty long time. The loading.tsx is just on a per-page basis, so this is so cool for super granular control over your server component loading states
@@joshtriedcoding That's true. But the part you load lazily at the bottom could've also been loaded client side with something like SWR. I'm wondering if a server component + suspense boundary has major benefits over client-side loading.
I wonder if search engine crawlers can see the section that's "behind" a suspense boundary 🤔
@@codinginflow Ah I get what you mean, good question. To me it feels more intuitive to write on the server side, and either way they'd have to wait for the data to arrive
If we would use a client component, wouldn't that also solve the problem ?
yes, but why would you use a client component over a server component when you can benefit from running things on the server (you can fetch data easily with SSR)? wouldn't make your page slower with client components (no need for hooks or states which make it slower)?
If you wanna get into more granular client-loading-behaviour, I 100% recommend react query (or similar) for that
all of this code is running on the server, suspense is sending out the loading state in html, and when the promise resolves it sends out the images, without ever needing to transport the js bundle, hence faster
Super
Do we not fall into this issue if we are using plain react and not next js?
Just wondering because after the DOM is painted then we fetch the data using useEffect
So the recommendations are user/client specific and only needed on the client right? So why did you not use 'use client' for the recommendation component?
Because data fetching is more intuitive in server components, you ship a smaller bundle size, and handling loading and error states like this is also easier than doing it client-side. Even if react-query does an awesome job at making that easy too
This is the same as using dynamic in Next right?
That’s nice, but I kind of thought you were going to propose a new UX rather than the fallback skeleton. That would be neat, like a brand new color or something.
Simple but this boy is right
Does suspense also work for the pages directory 🤔
It's a react feature, not NextJS - so yeah. You can split components from your bundle by importing them dynamically and specify the loading behavior very granularly using suspense
👍
Excellent video, why don't you mention the loading.tsx file for this purpose?
Good point, guess I've used it so much at this point I assumed it as known. Probably isn't though
am i correct that loading.tsx is for the whole page? so the whole page will be loading... until all datas are fetched?
супер!
4:02 They have it already for so long time.... I'm disappointed that typescript didn't fixed that yet.
4:54 wow
so that still using server side component? I thought only client side components can use loading like that
Nope, this works amazing for server components
sir more project tutorials please
Haven't they already fixed asynchronous components?
Thought so too??!
can i do this in react with vite?
yeah suspense is a react feature, not specific to next
Why not iterate over the array of images itself?
1:55
Images.map(….
added them later on, yeah works too
Suspense and loading.jsx are different in nextjs?
Suspense allows you to handle loading behavior for individual components, loading.tsx is for a certain route
@@joshtriedcoding thanks my friend I subscribe now.
Suspense is like usetransition I think.
I thought the async server type error was fixed? (Not a next js / react dev)
I thought so too?? No idea why this happened again. Just very recently too
but wouldn't it be better to have all of the data finished loading then show them to the user, this will show the user the complete fetched data instead of a bunch of loading states around the page
Then you page load will be substantially longer, resulting in a worse UX. Of course you can, I wouldn’t recommend it tho
@@joshtriedcoding great explaination man. Is there a way to use Sanity to make a blog using NextJS but when I write the articles I wanna save them as .md files so that they load faster into the page? does that make sense? Because I want an easy way to modify the posts and save them as .md files so that they load much faster than fetching them from api and getting a json back. I hope I'm clear on my question
@@mohammed.haydar Ahh I get what you mean. That's something I've never tried out with sanity actually. But that seems like a good use-case, even if sanity should not support that, there surely is a way to do this
This still has loading states though? 😂 am I not understanding the video title?
"Improperly handled loading states might be negatively affecting your user experience"
Suck counter: 8 😅
I dare you to turn this into a drinking game
Wrong title: How to unsuck your UX
Sorry was disappointed. There was no indication this is just a React solution.
useTransition is also very powerful for these cases ^_^
Thanks for this wonderful video... I'm getting the below error while using suspense in my Nextjs project and with React 18
Error: ReactDOMServer does not yet support Suspense.