Angular App reloads immediately when browser tab is out of focus

My blogging application reloads when i switch tab to a new tab. The moment the tab with the application is out of focus, the application reloads and return to the base route.
For example if I am filling out a form on the ‘/myform’ route and i switch tabs to get information for another tab, when i return, the app reloads to ‘/’ route

I have attempeted cache the last active route. This is implemented in app.component.ts

  ngOnInit() {


    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        localStorage.setItem('lastRoute', event.urlAfterRedirects);
      }
    });

    // Check if there's a stored route when the app initializes
    const lastRoute = localStorage.getItem('lastRoute');
    if (lastRoute ) {
      // Navigate to the stored route if it's different from the current route
      this.router.navigateByUrl(lastRoute);
    }

    Listen for visibility change events (when the user leaves or returns to the tab)
    document.addEventListener('visibilitychange', () => {
      if (!document.hidden) {
        console.log('VISIBILITY')
        // When the tab becomes visible again, restore the route
        const lastRoute = localStorage.getItem('lastRoute');
        if (lastRoute && this.router.url !== lastRoute) {
          this.router.navigateByUrl(lastRoute);
        }
      }
    });


  
  }

This the route is cached but the reload still happens.

I have also attempted the to use implement the routeReuseStrategy

@Injectable()
export class CustomReuseStrategy implements RouteReuseStrategy {
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        throw new Error('Method not implemented.');
    }

    store(snapshot: ActivatedRouteSnapshot): DetachedRouteHandle | null {
        // Add logic to determine which routes to store (e.g., by route data)
        if (snapshot.data['store']) {
            return { handle: snapshot.component, selector: snapshot.routeConfig?.path };
        }
        return null;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!route.routeConfig && !!route.data['reuse'];
    }

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        return !!this.store(route); // Detach only if the route is stored
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
        // Retrieve the previously stored handle based on route information

        const routeConfig = route.routeConfig?.path
        if(routeConfig){
        const stored = localStorage.getItem(routeConfig);
        if (stored) {
            return JSON.parse(stored);
        }
     

        }

        return null;
    }
}

And added it to the list of providers in app.config.ts

export const appConfig: ApplicationConfig = {
  
  providers: [
    provideHttpClient(),
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideClientHydration(withHttpTransferCacheOptions({
      includePostRequests: true
    })),
    provideRouter(routes), 
    provideStore(reducers, { metaReducers }),
    provideEffects(authEffects,userProfileEffects,blogEffects,linkedinAuthEffects), 
    provideStoreDevtools({
       maxAge: 25, 
       logOnly: !isDevMode(),
       autoPause:true,
       trace:false,
       traceLimit:75 }), 
    provideAnimationsAsync(), 
    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }

  ]
};

But there is still not change