How to use view transitions with laravel and react?

[Saad5400]

I am talking about: https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API

In SvelteKit it was done like this: https://svelte.dev/blog/view-transitions#Getting-started-with-view-transitions

So I tried doing the same:

import React, { useEffect } from 'react';
import { router } from '@inertiajs/react';

export default function DefaultLayout({ children }: { children: React.ReactNode }) {
    useEffect(() => {
        if (!document.startViewTransition) return;

        // When a navigation is triggered...
        const handleNavigate = (e: CustomEvent) => {
            // Check if we're navigating to a new page
            if (e.detail.visit.method === 'get')
                // Start a view transition
                document.startViewTransition(async () => {
                    // Wait until the navigation is complete by listening to the 'finish' event.
                    await new Promise<void>((resolve) => {
                        // `router.on` returns an "off" function we can call to unsubscribe.
                        const offFinish = router.on('finish', () => {
                            offFinish(); // Unsubscribe so we don't leak listeners
                            resolve();
                        });
                    });
                });
        };

        // Listen for Inertia navigation events.
        const offNavigate = router.on('start', handleNavigate);

        // Cleanup on unmount.
        return () => {
            offNavigate();
        };
    }, []);

    return <>{children}</>;
}

It works when navigating from one page to another ... However it doesn't work when I use viewTransitionName on a single unique component that exists in both pages.

import { cn } from "@/lib/utils";

export default function WelcomeLogo({
    className,
    ...props
}: React.ComponentProps<'img'>) {
    return (
        <img src='/favicon.webp' className={cn('rounded-4xl size-32', className)} {...props} style={{ viewTransitionName: 'welcome-logo' }} {...props} />
    );
}

Any ideas how to get it to work?

[Saad5400]

I guess I've solved my own issue like this: (IDK why but delay makes it work)

import React, { useEffect } from 'react';
import { router } from '@inertiajs/react';

export default function DefaultLayout({ children }: { children: React.ReactNode }) {
    useEffect(() => {
        if (!document.startViewTransition) return;

        // When a navigation is triggered...
        const handleNavigate = (e: CustomEvent) => {

            // Skip non-GET requests.
            if (e.detail.visit.method !== 'get') return;

            // Start the view transition.
            document.startViewTransition(async () => {
                await new Promise<void>((resolve) => {

                    // Complete the transition
                    const offFinish = router.on('finish', () => {

                        // Delay is required
                        setTimeout(() => {
                            offFinish();
                            resolve();
                        }, 10);
                    });
                });
            });
        };

        // Listen for Inertia navigation events.
        const offNavigate = router.on('before', handleNavigate);

        // Cleanup on unmount.
        return () => {
            offNavigate();
        };
    }, []);

    return <>{children}</>;
}

[Saad5400]

Not really good, causes slight freeze when submitting a form (using post)