shouldReload: false not working?

[laurenceks]

I'm brand new to TS Router and am pretty sure I'm just don't understand the correct implmentation, so am hoping someone smarter can help.

I have the following routes

/log/
/log/$shiftId

<Log/> is a layout component with an <Outlet/> that only shows when shiftId exists

Log.tsx

import LogTable from "./LogTable.tsx";
import { 
Button 
} from "react-bootstrap";
import {
    
Outlet
,
    useLoaderData,
    useNavigate,
    useParams,
    useRouterState,
} from "@tanstack/react-router";

const Log = () => {
    const navigate = useNavigate();
    const { isLoading, status } = useRouterState();
    const log = useLoaderData({ from: "/log" });
    
console
.log(log);
    const params = useParams({ strict: false });
    return (
        <div className="m-3 position-relative">
            <LogTable log={log} />
            <Outlet />
            <Button
                variant="success"
                className="position-fixed bottom-0 start-0 m-5"
                size="lg"
                disabled={
                    !!params?.shiftId || isLoading || status === "pending"
                }
                onClick={() => navigate({ to: "/log/new" })}
            >
                Add
            </Button>
        </div>
    );
};

export default Log;

routes/log/route.tsx

import { createFileRoute } from "@tanstack/react-router";
import mockLogData from "../../../../../tests/data/mockLogData.ts";
import Log from "../../components/Log.tsx";
import { memo } from "react";

export const Route = createFileRoute("/log")({
    component: memo(Log),
    loader: async () => {
        // simulates an api call to get entire log
        await new Promise((resolve) => {
            setTimeout(resolve, 1000);
        });
        return mockLogData;
    },
    shouldReload: false,
});

routes/log/$shiftId.tsx

import { createFileRoute } from "@tanstack/react-router";
import mockLogData from "../../../../../tests/data/mockLogData.ts";
import ShiftEditModal from "../../components/ShiftEditModal.tsx";
import { formatDate } from "../../../../shared/formatDates.ts";

export const Route = createFileRoute("/log/$shiftId")({
    component: ShiftEditModal,
    loader: async ({ params: { shiftId } }) => {
        if (shiftId === "new") {
            // new blank log entry
            return {
                id: "",
                date: formatDate(new Date(), "yyyy-mm-dd"),
                start: "",
                plannedEnd: "",
                actualEnd: "",
                from: "",
                plannedTo: "",
                actualTo: "",
                employment: "",
                type: "Normal",
                overrunType: "OT",
                toil: 0,
                flat: 0,
                lowerRate: 0,
                timeAndHalf: 0,
                higherRate: 0,
                double: 0,
            };
        } else {
            // simulates an api call
            await new Promise((resolve) => {
                setTimeout(resolve, Math.random() * 100);
            });
            return mockLogData.find((x) => x.id === shiftId);
        }
    },
    shouldReload: false,
});

I want the loader in route.tsx to only run when there is no $shiftId

Currently, it is loading the mockLogData every time.

I looked at the docs and GH issues/discussion which all seem to suggest that shouldReload: false should prevent this behaviour.

Am I going about this completely wrong?