Site Loading Problems Using @yield('content') vs Content
Hey guys, I am working on my dashboard for my site and followed(ish) the layout that Tony uses on his Building a SaaS series, where I moved the initial app.blade.php to main.blade.php and started making my dashboard with the new layouts/app.blade.php. Everything worked well on the move and I'm starting with some tailwindui.
I have the header in it's own partial now, which is loaded in the content and works great. The weirdness comes when I moved all the content out of layouts/app.blade.php into dashboard/index.blade.php and added @extends('theme::layouts.app')
@section('content') in front of the content. As well as the @yield('content') into layouts/app.blade.php.
The content is all there and loads correctly except for the first second of loading, everything is huge and the page goes super long and it takes a second or two to go back to the normal size. The icon slowly shrinks back to the correct size.
Weirdly, when cut and paste all the html until @section('content') and paste it to replace the @yield('content'), it loads perfectly fine. I'll attach what both look like.
My repo for the site is here: https://github.com/TonyWilly/PullNode-Wave
With @yield:
Without @yield (directly in app.blade.php):
The only other difference is the content extends down to the bottom of the page when yielded but not when directly in app.blade.php. I appreciate anyone's thoughts on how I can accomplish this yield setup without the messed up loading, thanks!
Hey Tony,
This is quite interesting. I’ll take a look and let you know if I can spot anything!
Hey Bobby. I believe the html elements are being loaded faster than the css.. The index.blade.php is extending app.blade.php though, so I'm not sure why it would load all the html before the @extends class loads. Especially because I believe this is how the initial wave app.blade.php and home.blade.php work for instance?
I found a (potentially bad practice?) fix though by just adding <link href="{{ asset('themes/' . $theme->folder . '/css/app.css') }}" rel="stylesheet"> again before my html content in index.blade.php. This seems to load the css initially in the index.blade.php and then would also probably load it again in the
Nonetheless, it seems to work as of the moment so I'll probably stick with that unless another idea arises or this causes any problems.
TLDR: For anyone reading experiencing this issue, adding <link href="{{ asset('themes/' . $theme->folder . '/css/app.css') }}" rel="stylesheet"> inside my extended classes' @section('content') fixed the late css loading of the css in @extends('theme::layouts.app').
Thanks for the response nonetheless, Bobby! Also, if anyone has an idea of why this loads this way or a more proper way to fix this, I'm still open to suggestions!
4 months later, I found the issue! Updating in case anyone comes across this with a similar problem. It was because I have @section('content'), without @endsection. The @endsection is very important in loading the the
tag correctly when yielding apparently.
1
Hey Tony! Happy to hear that you've got it all sorted out! And thank you for sharing your solution here with the community!