refactor(router-outlet): reuse lock controller (#28273)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Code is duplicated between the router outlet and the overlays

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Code is reused between the router outlet and the overlays

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Author: mapsandapps

Diff for: core/src/components/router-outlet/router-outlet.tsx

@@ -3,6 +3,7 @@ import { Component, Element, Event, Method, Prop, Watch, h } from '@stencil/core
 import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
 import { attachComponent, detachComponent } from '@utils/framework-delegate';
 import { shallowEqualStringMap, hasLazyBuild } from '@utils/helpers';
+import { createLockController } from '@utils/lock-controller';
 import { transition } from '@utils/transition';
 
 import { config } from '../../global/config';
@@ -24,11 +25,11 @@ import type { RouteID, RouterDirection, RouteWrite, NavOutlet } from '../router/
   shadow: true,
 })
 export class RouterOutlet implements ComponentInterface, NavOutlet {
+  private readonly lockController = createLockController();
   private activeEl: HTMLElement | undefined;
   // TODO(FW-2832): types
   private activeComponent: any;
   private activeParams: any;
-  private waitPromise?: Promise<void>;
   private gesture?: Gesture;
   private ani?: Animation;
   private gestureOrAnimationInProgress = false;
@@ -140,7 +141,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
     leavingEl: HTMLElement | undefined,
     opts?: RouterOutletOptions
   ): Promise<boolean> {
-    const unlock = await this.lock();
+    const unlock = await this.lockController.lock();
     let changed = false;
     try {
       changed = await this.transition(enteringEl, leavingEl, opts);
@@ -285,18 +286,6 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
     return true;
   }
 
-  // TODO: FW-5048 - Remove this code in favor of using lock controller from utils
-  private async lock() {
-    const p = this.waitPromise;
-    let resolve!: () => void;
-    this.waitPromise = new Promise((r) => (resolve = r));
-
-    if (p !== undefined) {
-      await p;
-    }
-    return resolve;
-  }
-
   render() {
     return <slot></slot>;
   }