Challenge 1 / 1

Our site has a sidebar that takes forever to load, so our project manager wanted us to extract it into a lazy Turbo Frame.

Now he wants us to show a loading indicator while it's loading! Here's the loading code:

<turbo-frame id="app_sidebar">
    {{ include('templates/_busySidebar.html.twig') }}

    <span class="frame-loading-show fas fa-spinner fa-spin">
    </span>
</turbo-frame>

How can I show and hide this spinner only when the turbo frame is busy?

turbo-frame .frame-loading-show {
    display: none;
}

turbo-frame[busy] .frame-loading-show {
    display: inline-block;
}

turbo-frame[busy] .frame-loading-show {
    display: inline-block;
}

turbo-frame .frame-loading-show {
    display: none;
}

turbo-frame[loading] .frame-loading-show {
    display: inline-block;
}

You actually do it with JavaScript! Create a stimulus controller and add/remove the classes when users click on a link to navigate within the frame.

Rewatch the video