Determining Page Refresh in Laravel Blade

I'm currently working on a Laravel project where I have an animation implemented in my Blade template. I want to ensure that the animation runs only when the page is initially loaded or refreshed, and not on the SPA mode (wire:navigate) (for example when the user goes back to the home page that contain the animation )

the


@php
    $trigger = here i want to put the logic to determine if the request is full page refresh type on wire:navigate type  
@endphp

<nav class="sticky top-0 bg-backdrop-blur-xl" style="">
    <div class="max-w-scr flex flex-wrap items-center justify-between mx-auto px-4 pb-1 pt-2">
        <div class="flex text-wrapper items-center space-x-3 rtl:space-x-reverse">
            @if ($trigger)
                <span x-data="textAnimation" x-init="startAnimation"
                    class="letters self-center text-2xl font-semibold whitespace-nowrap text-white">
                    <template x-for="(letter, index) in text" :key="index">
                        <span x-text="letter" x-show.transition="index <= currentIndex"></span>
                    </template>
                </span>
            @else
                <span class=" letters self-center text-2xl font-semibold whitespace-nowrap text-white">LogoText</span>
            @endif
        </div>
        <div class="flex space-x-3">
            <button
                class="flex items-center px-3 border border-slate-800 bg-indigo-950 hover:opacity-50 opacity-35 transition duration-400 ease-in-out rounded-xl "
                type="button">
                <span class="text-slate-300 hover:text-slate-200 transition duration-400 ease-in-out">Quick Search
                    ...</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    class="w-6 h-6 -pr-2 stroke-slate-300">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                </svg>

            </button>
            <button class="" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    class="w-8 h-8 stroke-slate-600">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                </svg>
            </button>
        </div>
    </div>
</nav>

<script>
    function textAnimation() {
        return {
            text: "LogoText",
            currentIndex: -1,
            startAnimation() {
                const interval = setInterval(() => {
                    this.currentIndex++;
                    if (this.currentIndex >= this.text.length) {
                        clearInterval(interval);
                    }
                }, 40);
            }
        };
    }
</script>

Bogey

2 years ago

Level 1

$(window).on('load', function() {
    $('#busyWorking').fadeOut('slow', function() {
        // Set display: none after the fading out animation is complete
        $(this).removeClass('d-block').addClass('d-none');
    });
});

Is that something like what you are looking for? I did that to end a loading animation when the page loads

1 like

medcharrafi

2 years ago

Level 48

thanks, bro @Bogey but I think this works for the real SPA apps that build with Vue/React....

Snapey

2 years ago

Best Answer

Level 122

sounds like you need to add a session variable that you can check when rendering the home page

1 like

Please or to participate in this conversation.