clear-react-router 1.5.5 → 1.5.6

package/dist/config/routerConfig.d.ts

@@ -0,0 +1,7 @@
+declare class RouterConfig {
+    isAnimated: boolean;
+    showFallbackIfAnimated: boolean;
+    configure(config: Partial<RouterConfig>): void;
+}
+export declare const routerConfig: RouterConfig;
+export {};

package/dist/context/RouterProviderContext.d.ts

@@ -3,6 +3,7 @@ export type NavigationContextValue = {
     blockerState: BlockerState;
     routeItemData: RouteItemData;
     currentLoaderFallback: RouteItem['loaderFallback'];
+    isLoading: boolean;
 };
 export type ActionsContextValue = {
     setSearch(arg: string): void;

package/dist/hooks/useHandleNavigation.d.ts

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

package/dist/hooks/useLoader.d.ts

@@ -12,5 +12,7 @@ export declare const useLoader: ({ routeList, context, setContext }: UseLoaderPa
         routeItem?: RouteItem;
         pathname: string;
     }) => boolean;
+    isLoading: boolean;
+    setIsLoading: Dispatch<SetStateAction<boolean>>;
 };
 export {};

package/dist/hooks/useSetIsAnimated.d.ts

@@ -1 +1 @@
-export declare const useSetIsAnimated: (isAnimated?: boolean) => void;
+export declare const useSetIsAnimated: (isAnimated: boolean | undefined, showFallbackIfAnimated: boolean) => void;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 //#region \0rolldown/runtime.js
 var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
 //#endregion
@@ -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, routeItemData, restoreScroll, currentLoaderFallback }) => {
+var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocation, setSearch, prefetchLoader, blockerState, routeItemData, restoreScroll, currentLoaderFallback, isLoading }) => {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContext.Provider, {
 		value: {
 			setSearch,
@@ -61,7 +61,8 @@ var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocat
 				value: {
 					blockerState,
 					routeItemData,
-					currentLoaderFallback
+					currentLoaderFallback,
+					isLoading
 				},
 				children
 			})
@@ -78,40 +79,55 @@ var useLatest = (value) => {
 	return ref;
 };
 //#endregion
-//#region store/createStore.ts
-var createStore = (storeCreator) => {
-	let store;
-	const subscribers = /* @__PURE__ */ new Set();
-	const get = () => store;
-	const set = (action) => {
-		const nextState = typeof action === "function" ? action(store) : action;
-		if (!Object.is(store, nextState)) {
-			const prevState = store;
-			store = typeof nextState !== "object" || nextState === null ? nextState : Object.assign({}, store, nextState);
-			subscribers.forEach((listener) => listener(store, prevState));
-		}
-	};
-	store = storeCreator(set, get);
-	const subscribe = (listener) => {
-		subscribers.add(listener);
-		return () => subscribers.delete(listener);
-	};
-	function use(selector) {
-		return useSyncExternalStore(subscribe, () => selector ? selector(get()) : get());
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
 	}
-	return {
-		get,
-		set,
-		subscribe,
-		use
-	};
-};
+	return ("string" === r ? String : Number)(t);
+}
 //#endregion
-//#region store/isAnimatedStore.ts
-var isAnimatedStore = createStore((set) => ({
-	isAnimated: false,
-	setIsAnimated: (isAnimated) => set({ isAnimated })
-}));
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region config/routerConfig.ts
+var RouterConfig = class {
+	constructor() {
+		_defineProperty(this, "isAnimated", false);
+		_defineProperty(this, "showFallbackIfAnimated", false);
+	}
+	configure(config) {
+		Object.assign(this, config);
+	}
+};
+var routerConfig = new RouterConfig();
 //#endregion
 //#region utils/createLazyComponent.tsx
 var createLazyComponent = (importFn, fallback) => {
@@ -166,8 +182,8 @@ var comparePaths = (el, pathname) => {
 //#endregion
 //#region hooks/useHandleNavigation.ts
 var ALL_LOCATIONS = "*";
-var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, isCacheItemFresh }) => {
-	const isAnimated = isAnimatedStore.use((state) => state.isAnimated);
+var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, isCacheItemFresh, setIsLoading }) => {
+	const { isAnimated, showFallbackIfAnimated: showFallback } = routerConfig;
 	const [blockedRoute, setBlockedRoute] = useState({
 		from: "",
 		to: ""
@@ -205,6 +221,7 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, is
 			routeItem,
 			loaderState: loaderState.current
 		});
+		setIsLoading(false);
 		setCurrentLoaderFallback(void 0);
 		prevPathname.current = nextLocation.pathname;
 		const fullPath = nextLocation.search ? `${nextLocation.pathname}${nextLocation.search}` : nextLocation.pathname;
@@ -262,7 +279,7 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, is
 		setCurrentLoaderFallback(isCacheItemFresh({
 			routeItem: nextItem,
 			pathname: nextLocation.pathname
-		}) ? void 0 : nextItem?.loaderFallback);
+		}) || isAnimated && !showFallback ? void 0 : nextItem?.loaderFallback);
 		await revalidateCache({
 			routeItem: nextItem,
 			loaderState,
@@ -281,7 +298,9 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, is
 		routeList,
 		transitionedNavigation,
 		setContext,
-		isCacheItemFresh
+		isCacheItemFresh,
+		isAnimated,
+		showFallback
 	]);
 	const setNextLocationRef = useLatest(navigationHandler);
 	const updateBlockedRoute = useCallback(({ type, payload = "" }) => setBlockedRoute((prevState) => {
@@ -344,6 +363,7 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, is
 //#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 }) => {
@@ -366,6 +386,7 @@ var useLoader = ({ routeList, context, setContext }) => {
 			if (loaderState) loaderState.current = loaderCacheRef.current[pathname];
 			return;
 		}
+		if (loaderState) setIsLoading(true);
 		try {
 			const params = getParamsObject({
 				params: routeItem.params,
@@ -411,14 +432,16 @@ var useLoader = ({ routeList, context, setContext }) => {
 			});
 		}, [revalidateCache, routeList]),
 		revalidateCache,
-		isCacheItemFresh
+		isCacheItemFresh,
+		isLoading,
+		setIsLoading
 	};
 };
 //#endregion
 //#region components/RouterProvider.tsx
 var RouterProvider = ({ children, routeList, context: initialContext = {} }) => {
 	const [context, setContext] = useState(initialContext);
-	const { prefetchLoader, revalidateCache, isCacheItemFresh } = useLoader({
+	const { prefetchLoader, revalidateCache, isCacheItemFresh, setIsLoading, isLoading } = useLoader({
 		routeList,
 		context,
 		setContext
@@ -428,7 +451,8 @@ var RouterProvider = ({ children, routeList, context: initialContext = {} }) =>
 		context,
 		setContext,
 		revalidateCache,
-		isCacheItemFresh
+		isCacheItemFresh,
+		setIsLoading
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
 		...useMemo(() => ({
@@ -441,7 +465,8 @@ var RouterProvider = ({ children, routeList, context: initialContext = {} }) =>
 			setContext,
 			routeItemData,
 			restoreScroll,
-			currentLoaderFallback
+			currentLoaderFallback,
+			isLoading
 		}), [
 			blockerState,
 			context,
@@ -451,7 +476,8 @@ var RouterProvider = ({ children, routeList, context: initialContext = {} }) =>
 			updateBlockedRoute,
 			updateLocation,
 			currentLoaderFallback,
-			restoreScroll
+			restoreScroll,
+			isLoading
 		]),
 		children
 	});
@@ -517,6 +543,14 @@ var usePreserveScroll = (preserveScroll) => {
 	]);
 };
 //#endregion
+//#region hooks/useSetIsAnimated.ts
+var useSetIsAnimated = (isAnimated = false, showFallbackIfAnimated) => {
+	useEffect(() => routerConfig.configure({
+		isAnimated,
+		showFallbackIfAnimated
+	}), [isAnimated]);
+};
+//#endregion
 //#region components/Spinner.tsx
 var Spinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cr-spinner" });
 //#endregion
@@ -528,10 +562,10 @@ var renderElement = (Component) => {
 //#endregion
 //#region components/Router.tsx
 var Router = ({ isAnimated, animationDuration, spinner = true, preserveScroll = true, showFallbackIfAnimated = false }) => {
-	const { routeItemData: { routeItem, loaderState }, currentLoaderFallback } = useNavigationState();
+	const { routeItemData: { routeItem, loaderState }, currentLoaderFallback, isLoading } = useNavigationState();
 	usePreserveScroll(preserveScroll);
 	useApplyCustomAnimation(animationDuration);
-	const isLoading = Boolean(currentLoaderFallback);
+	useSetIsAnimated(isAnimated, showFallbackIfAnimated);
 	const showErrorElement = !isLoading && Boolean(loaderState.loaderError || loaderState.beforeLoadError);
 	const showSpinner = spinner && isAnimated && isLoading;
 	const loadingContent = !showErrorElement && isLoading;

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, 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, isLoading, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

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

package/dist/store/createStore.d.ts

@@ -1,13 +0,0 @@
-type SetStateAction<T> = ((prevState: T) => Partial<T>) | Partial<T>;
-type Listener<T> = (state: T, prevState: T) => void;
-type Store<T> = {
-    get: () => T;
-    set: (action: SetStateAction<T>) => void;
-    subscribe: (listener: Listener<T>) => () => void;
-    use(): T;
-    use<S>(selector: (state: T) => S): S;
-    use<S>(selector?: (state: T) => S): T | S;
-};
-type StoreCreator<T> = (set: (action: SetStateAction<T>) => void, get: () => T) => T;
-export declare const createStore: <T>(storeCreator: StoreCreator<T>) => Store<T>;
-export {};

package/dist/store/isAnimatedStore.d.ts

@@ -1,13 +0,0 @@
-type IsAnimatedStore = {
-    isAnimated: boolean;
-    setIsAnimated(arg: boolean): void;
-};
-export declare const isAnimatedStore: {
-    get: () => IsAnimatedStore;
-    set: (action: Partial<IsAnimatedStore> | ((prevState: IsAnimatedStore) => Partial<IsAnimatedStore>)) => void;
-    subscribe: (listener: (state: IsAnimatedStore, prevState: IsAnimatedStore) => void) => () => void;
-    use(): IsAnimatedStore;
-    use<S>(selector: (state: IsAnimatedStore) => S): S;
-    use<S>(selector?: ((state: IsAnimatedStore) => S) | undefined): IsAnimatedStore | S;
-};
-export {};