How to show loader while auth is verifying?

import { createFileRoute, redirect } from '@tanstack/react-router';
import { toast } from 'sonner';
import {
  handleMagicLinkClicked,
  isThisSameBrowserAndDevice,
} from '../utils/auth';

export const Route = createFileRoute('/auth/verify')({
  beforeLoad: async ({ navigate }) => {
    const startTime = Date.now();
    // Ensure it's the same browser and device that initiated the request
    const isSameBrowserAndDevice = await isThisSameBrowserAndDevice();
    if (!isSameBrowserAndDevice) {
      toast.error(
        'Please use the same device and browser that was used to request the link.'
      );
      throw redirect({ to: '/auth' });
    }

    // Handle the magic link click, which should perform the verification
    const result = await handleMagicLinkClicked();
    const duration = Date.now() - startTime; // Calculate duration
    console.log(
      `Magic link verification result: ${result} after ${duration} ms`
    );

    // If the result indicates success, recheck the auth status
    if (result === 'success') {
      navigate({ to: '/' }); // Redirect to a default or intended page
    } else {
      toast.error('Invalid or expired magic link');
      throw redirect({ to: '/auth' }); // Redirect back to login on failure
    }
  },
});