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 <head> of app.blade.php.
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 <head> 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!