refactor(router-outlet): reuse lock controller (ionic-team#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

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>;
  }