Fixing Design Issues After Login on a Slow Internet Connection | Laravel and Vue 3 Series | Part 7

all right welcome back to another video and let's start this video by asking you one question and the question is do little things matter to you you can give you answer on the comment box below and in this video we'll be fixing one little thing and I think that little thing will also make a difference so let me show you what we're gonna fix in this video let me open up the console first let me click on logout let me click on network Tab and then let me do slow 3G let me click on sign in and this is loading and we see this broken design for a while right let me say that once again no throttling logout let me do slow 3G and then sign in and we see this broken design for a while so in this video we are gonna fix that little SEO and I think that little thing is creating something like the app is broken right so in this video we will be fixing that and I will see how we can do that step by step so make sure to watch this video till the end so now let's get started let me open up the code editor and let me go to app.js file first over here we are adding the middleware before is Route and then let me comment this code to show you here we are getting the user and now if I refresh the page let me do no throttling and if we don't have user then we are getting this space right we are getting this design but if we uncomment this and refresh it we see that broken design for a while and then we see this design but if you don't have user then we just see that broken design right so there is something we need to fix here so we shouldn't sew this design unless we have the user in our state right so for that we can use a sink of it so let me show you how we can do that let me go to get user or the user and over here we can make this function as a sync and this is a weight and then we can go over here and make this as a widget and let's make this is a sync okay and here we are making this function as a thing and this is a weight here we are waiting for the response and then we will show the dashboard page if I go to login.view file here we are sending the post request to this route and we are calling router push to this and point call admin slash dashboard right and we are on dashboard so when we are on dashboard and if we don't have that user information available then it used to display that broken design right but now we are making that as a sync and a weight so that it will only display the dashboard page if we have the user so let me refresh this and show you if I refresh this we don't see the broken design anymore right let me show you on slow 3G as well Let me refresh it and it is loading and we don't see that broken design let's do the same for settings over here so let's make this as a sync function I think and then await and then it's magnificence of it okay now let me show you let me click on no third link let me click on logout let me click on sign in and we don't see that broken design and let me show you one more thing let me click on logout let me open up this console let me click on sign in okay here we are dropping the login request first and then profile and then settings and then these two requests and on this waterfall tab we see this over here right we are sending login and then profile and then waiting for while response and after profile response is complete then we are sending this request and here we can group this to request and send this request in parallel so that we don't need to wait for each response to come back so let me show you how we can do that over here we can do promise dot all and inside this we can pass the area function so let's do auth user store dot get user and then another function is settings store.getsapping and let's define this above here and we can remove it and make sure to use a weight over here otherwise you will get the same broken design right here we need to use a weight and now let me show you that let me log out clear this let me do slow 3G click on sign in we are sending the login request first and then these two request at the same time you can see over here as well which is great so finally we fix that issue so now the app is looking much more smoother let me show you once again let me click on logout you see this page click on sign in we see this which is great and we don't see that broken design if we are on the slow Network as well let me say that on slow Network let me click on logout let's wait for some time click on sign in and it is loading it is not displaying the page unless we have user State available right this is great all right this was for this video I hope this video was helpful for you make sure to like share and subscribe to this channel as I will uploading the videos like this so till then have a great time and I will see you on the next one [Music] foreign [Music]

Channel: Clovon

Views: 543

Keywords: coding, tutorial, laravel, laravel and vue 3 tutorial, laravel and vue 3 project, laravel vue adminlte, vue3 tutorial, laravel application development, learn laravel framework, laravel crud, laravel crud tutorial, laravel how to, advanced laravel, advanced vue, advanced laravel and vue 3 tutorial, pinia store, how to use pinia store with laravel, pina store using vue 3, global state, image upload with pinia store, login logout without full page reload, fully spa, spa app

Id: X_ju-BZ5i0k

Length: 5min 48sec (348 seconds)

Published: Wed Sep 06 2023