how to page load transition

[fredbouin]

I made an animated transition during page loads on my site, so when you click on a link a splash screen fades in with a loader icon and then when the next page loads the splash screen fades out.

I accomplished this like this...
I have an absolutely positioned div with full screen width and height for the splash screen that is hidden by default with x-show:

<div x-show="loader" x-transition.opacity.duration.1000ms class="w-screen h-screen absolute left-0 top-0 z-50 bg-lead"> </div>

On my page links I add x-on:click="loader = true"
Something like:

<a href="{{ url }}" x-on:click="loader = true">View Product</a>

So when I click the link the splash screen fades in immediately before the other page has time to load.
Then I have another div with the same css as the loader splash that fades out on x-init

 <div x-init="$el.classList.add('opacity-0')" class="pointer-events-none transition-all duration-1000 w-screen h-screen absolute left-0 top-0 z-50 bg-lead">

So when the following page is loaded it appears to be the same splash screen that finally fades out.

This works, but it seems a bit convoluted, first off it means I have to add x-on:click="loader = true" to every link.
(maybe not bad if I want control over which links use the transition)

Also the second screen doesn't fade out once the new page is done loading, it fades out immediately. So instead of x-init is there something like "on finished loading" ?

Anyway I feel like this sort of page transition isn't necessarily unusual so I'm curious to see how else this could be approached with alpine.

[SimoTod]

I didn't check but you can probably use a generic listener on document and a listener for the load event on window.
Something like

<div x-show="loader" x-on:click.document="if($event.target & && $event.target.name == 'A') loader = true" x-on:load.window="loader = false" x-transition.opacity.duration.1000ms class="w-screen h-screen absolute left-0 top-0 z-50 bg-lead">...</div> 

[fredbouin]

thanks for the response, I like the x-on:load.window this looks like the fade happens after page load rather than on initial load like x-init, which is what I was looking for, and x-on:click.document is pretty much what I need.

Ok so if I do x-on:click.document="loader = true" the load page comes in no matter what I click on even if a new page isn't loading, so I'm guessing that if($event.target & && $event.target.name == 'A') is to avoid that, but it's not really working, I kind of just see a blip of the load screen.

[SimoTod]

You need to check the documentation for events, the property might have a different name (i just typed from my phone so I haven't really tried). The idea is to put a listener on document and fade out when the click is on a A tag. But again, I didn't check so it might also be that the event doesn't bubble up to document when it's an external link.

[fredbouin]

So I think I could write this as @click.document="if($event.target.tagName == 'A' ) loader = true"
What did you have in mind with the first part $event.target & &&. I'm thinking the single & was a typo, but I'm wondering if there is something I'm not getting about the logic of the simple $event.target

[SimoTod]

Yeah, the single & was a typo. It just checks if the property exists as a safety net.

[fredbouin]

got it, thanks for the help!

[fredbouin]

Is there a way to check if the page load stops?

The problem I'm now running into is if I click the browser stop button during page load the load screen animation stays stuck on the page.

I came across onabort but not sure how I would use it or if its exactly what I need,
Something like @document.onabort="loader = false"

[SimoTod]

I don't think there's a reliable way to do detect that.

[Paperweb]

Hi there, thanks for exploring this topic ! It really helped.

I was looking for a similar effect, and here is my implementation, where :

• the alpine data is on the body tag, so that it could be used by any content element
• the click event is recursively looking for internal+nonAnchor parent A
• i chose to use x-bind and tailwind classes instead of alpine x-transition.opacity, for some reason.

Note that i use Statamic, hence the double staches, and Tailwind.
Some classes removed for clarity.

<body
    x-data="{
        {{# The content is loading #}}
        loading: true,
        {{# Method to determine whether a clicked element has a parent A node #}}
        isLinkToPage () { 
            let element = this.$event.target;
            {{# Recursively look for a parent until A or no parent #}}
            while (element.parentNode) {
                element = element.parentNode;
                {{# console.log(element); #}}
                if (element.tagName === 'A') {
                    const href = element.getAttribute('href');
                    const protocol = href && href.startsWith('http') ? 'http' : href.startsWith('https') ? 'https' : null;
                    const hostname = href && href.match(/^https?:\/\/[^\/]+/i);
                    const isInternalLink = protocol === null || hostname === window.location.hostname;
                    const isNotAnchorLink = !href.includes('#');
                    {{# If it is an internal link but not an anchor link, validate the test #}}
                    if ( isInternalLink && isNotAnchorLink ) return true;
                    return null;
                }
            }
            return null;
        }
    }" 
    x-on:load.window="loading = false; {{# The window has finished loading #}}"
    x-on:click.document="if($event.target && isLinkToPage() ) loading = true; {{# Set loading mode when clicking on a link #}}"
    class="">


    {{# Loader #}}
    <div class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-opacity"
        x-bind:class="loading ? 'opacity-100' : 'opacity-0' {{# Show the loader when loading #}}" >
        <svg>Some spinning icon</svg>
    </div>

    {{# Content #}}
    <div x-bind:class="!loading ? 'opacity-100' : '' {{# Show the content when finished loading #}}"
        class="opacity-0 transition-opacity duration-300">

        {{ template_content }}

    </div>

</body>

Hope that helps further the conversation!

Cheers, and thanks to various sources for helping me coming up with this code.

[ekwoka]

You should just use the ViewTransitions API to handle this.

[Paperweb]

Interesting, i didn't know about this, i'll look it up.
It's a shame i'd have to work around it not being supported everywhere yet though, so i don't know if it's worth the learning time quite yet.
Cheers !

[ekwoka]

Easy enough.

Just have it do a direct swap with no transition if they don't have it.

Progressive enhancement.

('startViewTransition' in document ? document.startViewTransition : (cb) => cb())(() => swapPage())