Page to Page loading transitions with Next.js

Page to Page loading transitions with Next.js

Page to Page loading transitions with Next.js

GitHub : https://github.com/perkinsjr/page-to-…

Join this channel to get access to perks:
   / @james-perkins  

Want to support the channel? Click below
https://www.buymeacoffee.com/jamesper…

Follow me on:
📃 Website/Blog: https://jamesperkins.dev
👉 Twitter: https://twitter.com/james_r_perkins
👉 Linkedin: https://www.linkedin.com/in/james-per…
👉 Github: https://github.com/perkinsjr
👉 Discord : https://discord.gg/dqYP9Mc


Content

0.19 -> When using next link and Next.Js, occasionally you may
3.464 -> notice that your page loads white before the data shows up.
7.016 -> Maybe you're using SSR and it takes a long time for the data to
10.724 -> show up. Or maybe your user is using a slow connection and
14.516 -> they can't load the data as fast as you think. In this
18.152 -> video, I'm going to break down how to use a full page loader
22.09 -> on every page when they click and transition through.
25.748 -> So if you're ready to learn how to create a page loader,
29.374 -> let's start by looking at some code.
34.71 -> So the first thing we need to do is create a new Next.Js application
39.084 -> so that we can show you how to do page to page Loading.
42.314 -> First do MPX, create Next app,
45.552 -> and then give your app a name.
49.17 -> Once that's installed everything and it's loaded, we shall
53.43 -> open it in Visual Studio code. Now meet you there.
57.45 -> So here we are inside a standard Next.Js application
61.284 -> and we're not really going to be doing anything special. First, we're going
65.244 -> to create a new page here and we're just going to call it page two.
70.23 -> And inside of that page two is where we're just going to set a
73.584 -> page that we know has loaded. So we can do export default
79.05 -> function page two and
83.472 -> then return Div and
87.552 -> say H1. This is a
92.07 -> page. So now we have a page two.
95.868 -> We can kind of clear out most of this content and
99.864 -> just leave the heading and the main and
105.184 -> then we can create a link page here. So import
109.75 -> link from next link and
116.144 -> then use this link to wrap a button.
124.05 -> And inside that button we'll just say go
127.968 -> to page two and Href
132.422 -> here will just equal page two
139.09 -> and then we'll do pass href
144.85 -> and that will give us everything that we need to
149.416 -> make this work. So first let's just make sure that our application
152.812 -> runs to do yarn Dev, launch your local
156.388 -> host, open that in your favorite browser.
159.97 -> And here's our pages. I've launched the browser to Localhost 3000.
163.996 -> Click Go to page two and it says this is a page.
167.41 -> So at this point we're actually ready to investigate how you do this.
170.608 -> So we're actually going to be spending some time in our app.
173.644 -> Js. Our App. Js obviously contains everything
177.52 -> that our application has. For example,
180.67 -> you know, every component, every component wrapper, whether you've got
184.72 -> providers or CSS styles or whatever it might be.
188.632 -> So that's where we're going to be. So inside this app.
192.628 -> Js, we need to do a few things. First, we need to
195.964 -> know when events happen. For example,
198.82 -> when does the change of a route happen, what happens if
202.204 -> it completes, what happens if it errors? So we need to
205.672 -> access those. On top of that, we also need to create a way to
211.036 -> return a spinner that covers the whole page so
214.504 -> that we know that the data behind has loaded and we're
218.106 -> not seeing a blank white page before we see a page.
222.55 -> Now this may only happen if you're doing maybe SSR
226.878 -> or you have a complicated page.
230.188 -> And what happens is a user will see a blank page before they
233.692 -> see the page. Now that's not a great experience.
237.148 -> If you see a blank page before the page loads in, you're kind of like,
240.868 -> is it working? Did something go wrong? And we don't want our
244.264 -> users to have to worry about that. So what we're going to do is cover
247.12 -> it in a spinner. In the example, I'm going to put a set timeout
250.83 -> that's 50 milliseconds
254.67 -> just so that you can see it on screen. But in applications
258.534 -> where, let's say, for example, you're Loading from SSR and you're Loading a
261.736 -> bunch of data and you're collecting data, this would be a good use case.
267.13 -> So inside your app JS, we just need to import three things.
272.59 -> Use router and that comes from next router.
277.33 -> And we need use date and use effect from react.
290.75 -> Now we have those, we can create a function outside of this my
294.14 -> app. And this function is going to be our Loading function, just a function,
298.19 -> we call it Loading. We don't pass anything in.
301.7 -> And this is where we're going to handle everything. First we're going to access
306.272 -> use router,
309.87 -> then we're going to set a state. So we're just going to have a state
312.9 -> of Loading and then set Loading
317.79 -> use state. And by default we want it to be false.
321.47 -> Underneath that, we're going to write a use effect. And the
324.996 -> use effect is going to take on
329.388 -> the job of essentially looking to see what events
332.786 -> have happened and what events have completed or
336.516 -> started or errored, et cetera. So the power of
340.896 -> use router is it has this function. If you do router events
346.05 -> on, you can actually request different route
349.802 -> events based upon what you want. Now, the ones we're interested
353.604 -> in are going to be Route Change Start,
359.19 -> Route Change Complete and Route
363.194 -> Change Error. These three here give
367.032 -> us access to what we need. We can start the
370.056 -> Loading when the route change starts and then we can finish it when either
373.572 -> an error happens or the complete status happens. So inside of our
377.376 -> use effect, what we're going to do is we're going to have two functions here,
380.592 -> one called handle start and
385.252 -> one called handle complete.
389.83 -> Now the way handle start is going to work is we're going to pass in
392.776 -> the URL. The URL is then going to check to see if
396.184 -> the URL matches the router as path. So that's essentially
399.978 -> saying, hey, if this event router dot events
404.59 -> URL does not match the current URL that we're at set
408.76 -> Loading to true, then if
412.192 -> it's complete, we're going to set if the URL is equal
415.746 -> to the router path. So if this URL matches
418.938 -> the path, then we can set Loading to false.
423.25 -> So let's start with handle star it's just going to equal
429.01 -> and then we're going to put URL and
432.784 -> then we're going to say URL
437.31 -> does not equal router as
442.276 -> path and if that is true
446.29 -> we can just say and set Loading to true
451.39 -> and then for handle complete we can
454.852 -> say the exact same thing here. So we can just copy
458.166 -> and paste this,
460.93 -> drop it in here and we can just say if it equals this,
465.55 -> set this to false and that's
469.434 -> what you would do in a normal circumstance.
472.794 -> And then underneath here is where we can do our return
477.496 -> and then obviously our full return for what happens when
480.856 -> this function is loaded. But let's just talk about this.
485.77 -> This is good for now and this is what you should do in production.
489.042 -> But I need to show you what would happen if it was
492.52 -> actually Loading data at a rate that
495.856 -> could be on a server or something like that. So I'm going to set a
498.616 -> set timeout here and
502.616 -> we're going to set the time out to equal
508.43 -> function and inside that we're going to set the Loading to false
513.29 -> and then we will comma
518.17 -> and we'll set this to 5000. That should give us enough time
521.672 -> to see the spinner in action.
524.69 -> So now we can remove all this and then we can just do
528.272 -> our events. So we're going to do router dot events dot
532.234 -> on. So on an event we're going to add a
535.604 -> listener here so we're going to use router change
539.852 -> start and we're just going to
543.188 -> handle start and then
548.63 -> we need another one here so we can copy this down
551.888 -> to save a bit of time and we can say
555.44 -> change start instead of change start we can say change complete and
560.216 -> we'll do handle complete and
564.104 -> then finally and just make sure you give it the right
567.644 -> name. It's router dot event not route
571.198 -> events. And then finally we need one more
574.46 -> so we can copy the complete one because it's the same at the end
577.976 -> and it's just change error.
581.134 -> So this would be if something went wrong we'd still want to show the
585.464 -> page so that we could handle it correctly and
589.184 -> then we need to do our return here and
593.384 -> our return here is just going to be on
597.716 -> the opposite of these so we can actually copy this down and so
602.27 -> routers Eventoff is what we want so
607.796 -> we can do routers dot event dot off
614.87 -> and then that will handle the opposite of this so
618.284 -> on event and on the off part. So now we
622.016 -> have everything here, we actually need to write a loader so I'm going to
625.304 -> write a learner here so we're going to say return Loading and
631.37 -> then inside of here we can write a Div and this Div is going to
634.388 -> get a class name and we're going to set this to spinner
638.35 -> wrapper and then inside
641.828 -> of here we're going to have another divisive class name
645.95 -> equal to spinner.
652.41 -> So what we have here is a spinner and a spinner wrapper and
656.004 -> at this point, this is ready to actually test. We just need to place it
659.376 -> down in here. But I just want to do a full
662.808 -> over the top loader so the
666.756 -> loader will actually overlay over the Top of the
670.2 -> page so that if there is Data Loading in or there's
673.646 -> a white page and then a Blank Page, people don't see that. They just see
676.776 -> the data that we've required. So inside my global CSS here,
680.436 -> I'm just going to write two pieces of CSS and then
684.252 -> we'll be good and I'm just going to speed this up because it's not really
687.36 -> important to the tutorial but you'll
690.866 -> at least see how this works.
805.39 -> So you've just watched me create some CSS. What we can talk about here,
808.84 -> basically I created a wrapper that wraps the whole page up and
812.716 -> has a Background of white and then I have this which
816.04 -> just has a border of this color and then just has some
819.232 -> rotation. I don't know if it's going to look any Good, but it will
822.976 -> do the job. So the final thing we need to do is actually
826.528 -> implement Loading. So down here in your return function, you can
830.44 -> just add in the loader
834.198 -> and a fragment so we can do a fragment and
837.904 -> then we can do and
842.804 -> we can just move the fragment here to
846.896 -> the end. Hit save. So now this will load whenever
850.714 -> there's a Page load. So let's go ahead and launch our application and give it
853.976 -> a test. Okay, so we're in the next JS Application.
857.57 -> We're going to test now to see whether or not this when we click spun,
861.406 -> we should get a spin and loader so let's go ahead and do that.
864.74 -> There we go. It's not the prettiest, but it does spin
868.126 -> on screen and it will spin for however long we set in
871.916 -> our Timeout. And then if we go back page, it will also do the
875.804 -> spin as well. So there you have it. A way to do a page to
879.212 -> Page loader using next JS. If you're looking for the
882.884 -> GitHub look in the description, it'll be right there so that
886.316 -> you can just copy and paste it as needed. If you did enjoy
889.724 -> the video, make sure to drop it alike. Subscribe to the channel for more content
893.432 -> around next JS web development and SaaS development and
897.332 -> until next time, see ya.

Source: https://www.youtube.com/watch?v=2Tj6lcfJytA