Auth Guard in Angular 17 shows login page briefly before redirecting to actual route

Question

Whenever i use the auth guard in angular 17, it shows the login page breifly before going to the actual route it should go to.

This is my auth Guard

import { inject } from '@angular/core';
import { CanActivateFn } from '@angular/router';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { LoadingService } from '../../data-access/services/loading/loading.service';
import { AuthService } from '../../data-access/services/auth/auth.service';

export const authGuard: CanActivateFn = (route, state) : Observable<boolean> |  Promise<boolean> | boolean => {
  let loadingService = inject(LoadingService);
  const router = inject(Router);
  const authService = inject(AuthService);
  loadingService.isLoading.next(true)
  const isAuthenticated : boolean = authService.isUserAuthenticated();
  if(!isAuthenticated){
    loadingService.isLoading.next(false)
    router.navigate(['login'])
  }
  loadingService.isLoading.next(false)
  return isAuthenticated;
};

this is my route :

{
        path:'order/:id', component:OrderComponent , canActivate:[authGuard]
    },
{
        path:'login', component:LoginComponent
    },

i even tried to update my loading service, but it still didn't work