Should matchRoute({ pending: true }) match if pendingMs hasn't elapsed yet?

[tom-sherman]

See https://codesandbox.io/s/pedantic-snowflake-hsd04?file=/src/index.tsx

Each post content is set to pending (indicated with opacity 50%) instantly when you navigate to a new route, even though the pendingMs hasn't elapsed yet.

This seems confusing as it's different behaviour to when pendingElement shows. Am I thinking about it wrong?

[Mario-Eis]

We hit a similar inconsitency. We manage highlighted links and pre-opened collapsables depending on the active route in a navigation menu.
Current behaviour is: When a link is clicked, it changes its color instantly (when respecting {pending: true}) or way after pendingMs expired and a spinner is shown to the user (when only respcting {pending: false}). That feels...odd.
It should behave like a user clicks a link --> the page loader bar starts to work --> pendingMs expires --> the old route is unmounted, a spinner is shown AND the link component should get active and e.g. change its color. That would be much more consistent to what the user sees on screen.

[Mario-Eis]

To tackle this issues, i created the following helper hooks. I dont know how stable they are. But they seem to work rather fine:

import {RegisteredRouter, ToOptions, ToPathOption, useMatches, useMatchRoute, useRouter, useRouterState} from "@tanstack/react-router";
import {useMemo} from "react";

function stripSlash(path: string) {
    return path.length <= 1 ? path : path.replace(/\/$/, "");
}

function checkPendingMatch(router: ReturnType<typeof useRouter>, targetLocation: string, desiredPath: ToPathOption<RegisteredRouter>, fuzzy = false) {
    // We check the target destination.
    // Use buildLocation to safely handle relative paths (e.g., "." or "..")
    const absoluteDesiredPath = router.buildLocation({to: desiredPath}).pathname;
    const normalizedDesiredPath = stripSlash(absoluteDesiredPath);
    const normalizedTargetPath = stripSlash(targetLocation);

    if (fuzzy) {
        // Safe fuzzy check: Exact match, or it is a true sub-path
        return normalizedTargetPath === normalizedDesiredPath || normalizedTargetPath.startsWith(`${normalizedDesiredPath}/`);
    }
    // Exact match
    return normalizedTargetPath === normalizedDesiredPath;
}

function usePendingNavigation() {
    const {isTransitioning, targetLocation, resolvedLocation} = useRouterState({
        structuralSharing: true,
        select: (s) => ({
            isTransitioning: s.resolvedLocation != null && s.location.pathname !== s.resolvedLocation.pathname,
            targetLocation: s.location.pathname,
            resolvedLocation: s.resolvedLocation?.pathname ?? ""
        })
    });

    const deepestPath = useMatches({
        select: (matches) => matches.length > 0 ? matches[matches.length - 1].pathname : ""
    });

    const isSpinnerOnScreen = isTransitioning && stripSlash(deepestPath) !== stripSlash(resolvedLocation);

    return {isSpinnerOnScreen, targetLocation};
}

/*
    Check if route is active with respect to pendingMs
*/
export function useRouteActive(desiredPath: NonNullable<ToOptions["to"]>, fuzzy = false) {
    const matchRoute = useMatchRoute();
    const router = useRouter();
    const {isSpinnerOnScreen, targetLocation} = usePendingNavigation();

    if (!isSpinnerOnScreen) {
        // if there is no spinner, let TanStack handle the fully loaded, resolved state natively.
        return matchRoute({to: desiredPath, fuzzy}) !== false;
    }

    return checkPendingMatch(router, targetLocation, desiredPath, fuzzy);
}