Repository: facebook/react
File: packages/react-dom/src/client/ReactDOMDefaultTransitionIndicator.js (JavaScript)

Code before:
        focusReset: 'manual',
        scroll: 'manual',
      });
    }
  }

  function handleNavigateComplete() {
    const wasRunning = pendingResolve !== null;
    if (pendingResolve !== null) {
      // If this was not our navigation completing, we were probably cancelled.
      // We'll start a new one below.
      pendingResolve();
      pendingResolve = null;
    }
    if (!isCancelled) {
      // Some other navigation completed but we should still be running.
      // Start another fake one to keep the loading indicator going.
      if (wasRunning) {
        // Restart sync to make it not janky if it was already running
        startFakeNavigation();
      } else {
        // Since it hasn't started yet, we want to delay it up to a bit.
        // There needs to be an async gap to work around https://issues.chromium.org/u/1/issues/419746417.
        const fakeNavigationDelay = Math.max(
          0,
          defaultTransitionIndicatorDelay - (performance.now() - scheduledAt),
        );
        setTimeout(startFakeNavigation, fakeNavigationDelay);
      }
    }
  }

  // $FlowFixMe
  navigation.addEventListener('navigate', handleNavigate);
  // $FlowFixMe
  navigation.addEventListener('navigatesuccess', handleNavigateComplete);
  // $FlowFixMe
  navigation.addEventListener('navigateerror', handleNavigateComplete);

  function startFakeNavigation() {
    if (isCancelled) {
      // We already stopped this Transition.
      return;
    }
    if (navigation.transition) {
      // There is an on-going Navigation already happening. Let's wait for it to
      // finish before starting our fake one.
      return;
    }
    // Trigger a fake navigation to the same page
    const currentEntry = navigation.currentEntry;

Review comment (suggestion):
I feel like the rationale here is a bit inversed.

If an unrelated navigation happens in beginning happen then there already is a spinner showing. The rationale for delaying it doesn't make us avoid a spinner from being shown at all since it was already triggered. The reason for the original default delay doesn't apply in this scenario because there was already one going. In fact, delaying it just makes it feel like there was two separate actions instead of one sequence.

On the other hand if this happens after the original one has already started, and a different navigation comes in to briefly interrupt and then we want to resume, it might be good to avoid restarting if we're about to finish.

So I feel like in either scenario there should be a small gap to let any pending tasks that unblocks finish it before we start but not so long to let it feel like a separate action.

Basically, this should just always be like 20ms whether we interrupted the first start or was already running and restarted.

Code after:
  function handleNavigateComplete() {
    if (pendingResolve !== null) {
      // If this was not our navigation completing, we were probably cancelled.
      // We'll start a new one below.
      pendingResolve();
      pendingResolve = null;
    }
    if (!isCancelled) {
      // Some other navigation completed but we should still be running.
      // Start another fake one to keep the loading indicator going.
      // There needs to be an async gap to work around https://issues.chromium.org/u/1/issues/419746417.
      setTimeout(startFakeNavigation, 20);
    }
  }

  // $FlowFixMe
  navigation.addEventListener('navigate', handleNavigate);
  // $FlowFixMe
  navigation.addEventListener('navigatesuccess', handleNavigateComplete);
  // $FlowFixMe
  navigation.addEventListener('navigateerror', handleNavigateComplete);

  function startFakeNavigation() {
    if (isCancelled) {
      // We already stopped this Transition.
      return;
    }
    if (navigation.transition) {
      // There is an on-going Navigation already happening. Let's wait for it to
      // finish before starting our fake one.
      return;
    }
    // Trigger a fake navigation to the same page
    const currentEntry = navigation.currentEntry;
    if (currentEntry && currentEntry.url != null) {
      navigation.navigate(currentEntry.url, {
        state: currentEntry.getState(),
        info: 'react-transition', // indicator to routers to ignore this navigation
        history: 'replace',
      });
    }
  }

  // Delay the start a bit in case this is a fast Transition.
  setTimeout(startFakeNavigation, 100);

  return function () {
    isCancelled = true;
    // $FlowFixMe
    navigation.removeEventListener('navigate', handleNavigate);
    // $FlowFixMe