clear-react-router 1.4.7 → 1.4.8

package/dist/context/RouterProviderContext.d.ts

@@ -1,7 +1,6 @@
 import { BlockerState, Location, RouteItem, RouteItemData, UpdateBlockedRouteProps } from '../types/global';
 export type NavigationContextValue = {
     blockerState: BlockerState;
-    isLoading: boolean;
     routeItemData: RouteItemData;
     currentLoaderFallback: RouteItem['loaderFallback'];
 };

package/dist/hooks/useHandleNavigation.d.ts

@@ -5,9 +5,12 @@ type UseHandleNavigation = {
     context: Record<string, unknown>;
     revalidateCache(arg: RevalidateCacheArgs): Promise<void>;
     setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
-    setIsLoading: Dispatch<SetStateAction<boolean>>;
+    isCacheItemFresh(arg: {
+        routeItem?: RouteItem;
+        pathname: string;
+    }): boolean;
 };
-export declare const useHandleNavigation: ({ routeList, context, revalidateCache, setContext, setIsLoading, }: UseHandleNavigation) => {
+export declare const useHandleNavigation: ({ routeList, context, revalidateCache, setContext, isCacheItemFresh, }: UseHandleNavigation) => {
     blockerState: BlockerState;
     updateLocation: (nextLocation: Location) => Promise<void>;
     updateBlockedRoute: ({ type, payload }: UpdateBlockedRouteProps) => void;

package/dist/hooks/useLoader.d.ts

@@ -8,7 +8,9 @@ type UseLoaderParams = {
 export declare const useLoader: ({ routeList, context, setContext }: UseLoaderParams) => {
     prefetchLoader: (pathname: string) => Promise<void>;
     revalidateCache: ({ routeItem, loaderState, pathname }: RevalidateCacheArgs) => Promise<void>;
-    isLoading: boolean;
-    setIsLoading: Dispatch<SetStateAction<boolean>>;
+    isCacheItemFresh: ({ routeItem, pathname }: {
+        routeItem?: RouteItem;
+        pathname: string;
+    }) => boolean;
 };
 export {};

package/dist/index.js

@@ -45,7 +45,7 @@ var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((expor
 var import_jsx_runtime = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = require_react_jsx_runtime_production();
 })))();
-var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocation, setSearch, prefetchLoader, blockerState, isLoading, routeItemData, restoreScroll, currentLoaderFallback }) => {
+var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocation, setSearch, prefetchLoader, blockerState, routeItemData, restoreScroll, currentLoaderFallback }) => {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContext.Provider, {
 		value: {
 			setSearch,
@@ -60,7 +60,6 @@ var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocat
 			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationContext.Provider, {
 				value: {
 					blockerState,
-					isLoading,
 					routeItemData,
 					currentLoaderFallback
 				},
@@ -132,7 +131,7 @@ var comparePaths = (el, pathname) => {
 //#endregion
 //#region hooks/useHandleNavigation.ts
 var ALL_LOCATIONS = "*";
-var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, setIsLoading }) => {
+var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, isCacheItemFresh }) => {
 	const [blockedRoute, setBlockedRoute] = useState({
 		from: "",
 		to: ""
@@ -170,12 +169,12 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, se
 			routeItem,
 			loaderState: loaderState.current
 		});
-		setIsLoading(false);
+		setCurrentLoaderFallback(void 0);
 		prevPathname.current = nextLocation.pathname;
 		const fullPath = nextLocation.search ? `${nextLocation.pathname}${nextLocation.search}` : nextLocation.pathname;
 		if (fullPath === window.location.pathname + window.location.search) return;
 		history.pushState(null, "", fullPath);
-	}, [setIsLoading]);
+	}, []);
 	const transitionedNavigation = useCallback((nextLocation, routeItem) => {
 		setScrollMap((prevState) => {
 			const scrollPosition = document.scrollingElement?.scrollTop ?? 0;
@@ -220,7 +219,10 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, se
 			return transitionedNavigation(nextLocation, nextItem);
 		}
 		if (seq !== navigationSeq.current) return;
-		setCurrentLoaderFallback(nextItem?.loaderFallback);
+		setCurrentLoaderFallback(isCacheItemFresh({
+			routeItem: nextItem,
+			pathname: nextLocation.pathname
+		}) ? void 0 : nextItem?.loaderFallback);
 		await revalidateCache({
 			routeItem: nextItem,
 			loaderState,
@@ -238,7 +240,8 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, se
 		revalidateCache,
 		routeList,
 		transitionedNavigation,
-		setContext
+		setContext,
+		isCacheItemFresh
 	]);
 	const setNextLocationRef = useLatest(navigationHandler);
 	const updateBlockedRoute = useCallback(({ type, payload = "" }) => setBlockedRoute((prevState) => {
@@ -301,7 +304,6 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, se
 //#endregion
 //#region hooks/useLoader.ts
 var useLoader = ({ routeList, context, setContext }) => {
-	const [isLoading, setIsLoading] = useState(false);
 	const cacheTimestampsRef = useRef({});
 	const loaderCacheRef = useRef({});
 	const isCacheItemFresh = useCallback(({ routeItem, pathname }) => {
@@ -313,7 +315,8 @@ var useLoader = ({ routeList, context, setContext }) => {
 	}, []);
 	const revalidateCache = useCallback(async ({ routeItem, loaderState, pathname }) => {
 		if (!routeItem?.loader) {
-			if (loaderState) loaderState.current = {};
+			if (!loaderState) return;
+			if (!routeItem?.beforeLoad) loaderState.current = {};
 			return;
 		}
 		if (isCacheItemFresh({
@@ -323,7 +326,6 @@ var useLoader = ({ routeList, context, setContext }) => {
 			if (loaderState) loaderState.current = loaderCacheRef.current[pathname];
 			return;
 		}
-		if (loaderState) setIsLoading(true);
 		try {
 			const params = getParamsObject({
 				params: routeItem.params,
@@ -369,15 +371,14 @@ var useLoader = ({ routeList, context, setContext }) => {
 			});
 		}, [revalidateCache, routeList]),
 		revalidateCache,
-		isLoading,
-		setIsLoading
+		isCacheItemFresh
 	};
 };
 //#endregion
 //#region components/RouterProvider.tsx
 var RouterProvider = ({ children, routeList, context: initialContext = {} }) => {
 	const [context, setContext] = useState(initialContext);
-	const { prefetchLoader, revalidateCache, isLoading, setIsLoading } = useLoader({
+	const { prefetchLoader, revalidateCache, isCacheItemFresh } = useLoader({
 		routeList,
 		context,
 		setContext
@@ -387,7 +388,7 @@ var RouterProvider = ({ children, routeList, context: initialContext = {} }) =>
 		context,
 		setContext,
 		revalidateCache,
-		setIsLoading
+		isCacheItemFresh
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
 		...useMemo(() => ({
@@ -401,12 +402,10 @@ var RouterProvider = ({ children, routeList, context: initialContext = {} }) =>
 			routeList,
 			routeItemData,
 			restoreScroll,
-			currentLoaderFallback,
-			isLoading
+			currentLoaderFallback
 		}), [
 			blockerState,
 			context,
-			isLoading,
 			prefetchLoader,
 			routeItemData,
 			routeList,
@@ -491,10 +490,11 @@ var renderElement = (Component) => {
 //#endregion
 //#region components/Router.tsx
 var Router = ({ isAnimated, animationDuration, spinner = true, preserveScroll = true, showFallbackIfAnimated = false }) => {
-	const { isLoading, routeItemData: { routeItem, loaderState }, currentLoaderFallback } = useNavigationState();
+	const { routeItemData: { routeItem, loaderState }, currentLoaderFallback } = useNavigationState();
 	usePreserveScroll(preserveScroll);
 	useApplyCustomAnimation(animationDuration);
-	const showErrorElement = useMemo(() => Boolean(loaderState.loaderError || loaderState.beforeLoadError), [loaderState]);
+	const isLoading = Boolean(currentLoaderFallback);
+	const showErrorElement = !isLoading && Boolean(loaderState.loaderError || loaderState.beforeLoadError);
 	const showSpinner = spinner && isAnimated && isLoading;
 	const loadingContent = !showErrorElement && isLoading;
 	if ((showFallbackIfAnimated || !isAnimated) && loadingContent) return renderElement(currentLoaderFallback);

package/dist/provider/Provider.d.ts

@@ -3,5 +3,5 @@ import { type ActionsContextValue, type DataContextValue, type NavigationContext
 type ProviderProps = NavigationContextValue & ActionsContextValue & DataContextValue & {
     children: ReactNode;
 };
-export declare const Provider: ({ children, setContext, context, updateBlockedRoute, updateLocation, setSearch, prefetchLoader, blockerState, isLoading, routeItemData, restoreScroll, currentLoaderFallback, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Provider: ({ children, setContext, context, updateBlockedRoute, updateLocation, setSearch, prefetchLoader, blockerState, routeItemData, restoreScroll, currentLoaderFallback, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clear-react-router",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "description": "A lightweight, type-safe routing library for React applications",
   "author": "Andrew Bubnov",
   "scripts": {