flagon-io/g1t

public

Opening Notifications lights only the row you chose: a sidebar whose rows differ only by their query shows a row as loading only when the page on its way is that row's, not every row on the same path.

127	127		children: ReactNode;
128	128		}) {
129	129		const { pathname } = useLocation();
	130	+	const navigation = useNavigation();
	131	+	// NavLink's own pending state compares paths only, so a list whose rows
	132	+	// differ by query (Notifications' views and reasons) would light every
	133	+	// row while one loads. Where the list says which row is current, a row
	134	+	// is pending only when the page on its way is that row's, query and all.
	135	+	const loading = navigation.location;
	136	+	const pendingHere = loading != null && `${loading.pathname}${loading.search}` === to;
130	137		return (
131	138		<NavLink
132	139		to={to}
⋯
136	143		const current =
137	144		lit ??
138	145		(isActive \|\| [also ?? []].flat().some((prefix) => pathname === prefix \|\| pathname.startsWith(prefix + "/")));
	146	+	const pending = lit === undefined ? isPending : pendingHere;
139	147		return `group flex h-8 items-center gap-2.5 rounded-md px-2 text-[0.8125rem] transition-colors ${
140	148		current
141	149		? "bg-raised font-medium text-fg"
142		−	: isPending
	150	+	: pending
143	151		? "bg-raised/60 text-fg"
144	152		: "text-muted hover:bg-raised/60 hover:text-fg"
145	153		}`;