clear-react-router 1.4.1 → 1.4.2

package/README.md

@@ -79,7 +79,7 @@ Renders the current route's component. Must be placed inside `<RouterProvider>`.
 </RouterProvider>
 ```
 
-> **Note:** When `isAnimated` is enabled, `loaderFallback` is not shown. Instead, a small spinner appears (if `spinner={true}`).
+> **Note:** When `isAnimated` is enabled, `loaderFallback` is not shown. Instead, a small spinner appears (if `spinner={true}`). On the initial page load, however, the route's loaderFallback is rendered if available.
 
 ### `Link`
 

package/dist/index.js

@@ -500,7 +500,6 @@ var renderElement = (Component) => {
 };
 //#endregion
 //#region components/Router.tsx
-var PAGE_NOT_FOUND = "error 404. Page not found";
 var ALL_LOCATIONS = "*";
 var Router = ({ spinner = true }) => {
 	const { location, isLoading } = useNavigationState();
@@ -510,15 +509,27 @@ var Router = ({ spinner = true }) => {
 		if (!location.pathname) return void 0;
 		return routeList.find((el) => el.path === ALL_LOCATIONS || comparePaths(el, location.pathname));
 	}, [location.pathname, routeList]);
-	const params = useMemo(() => getParamsObject({
+	const pendingRoute = useMemo(() => {
+		if (location.pathname) return void 0;
+		return routeList.find((el) => comparePaths(el, window.location.pathname));
+	}, [location.pathname, routeList]);
+	const params = useMemo(() => {
+		return getParamsObject({
+			routeItem: routeItem || pendingRoute,
+			pathname: location.pathname || window.location.pathname
+		});
+	}, [
+		location.pathname,
 		routeItem,
-		pathname: window.location.pathname
-	}), [routeItem]);
+		pendingRoute
+	]);
 	const shouldErrorElementShown = useMemo(() => Boolean(loaderState[location.pathname]?.loaderError || loaderState[location.pathname]?.beforeLoadError), [loaderState, location.pathname]);
-	if (spinner && !routeItem && isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {});
-	if (!routeItem && isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {});
-	if (!routeItem) return null;
-	if (!isAnimated && routeItem?.loader && !shouldErrorElementShown && isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
+	if (!routeItem && !pendingRoute) return null;
+	if (!routeItem && pendingRoute) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
+		params,
+		children: renderElement(pendingRoute?.loaderFallback)
+	});
+	if (!isAnimated && !shouldErrorElementShown && isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
 		params,
 		children: renderElement(routeItem?.loaderFallback)
 	});
@@ -530,7 +541,7 @@ var Router = ({ spinner = true }) => {
 		style: { viewTransitionName: "page" },
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ViewProvider, {
 			params,
-			children: [renderElement(routeItem?.element) || PAGE_NOT_FOUND, spinner && isAnimated && isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})]
+			children: [renderElement(routeItem?.element) || null, spinner && isAnimated && isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})]
 		})
 	});
 };

package/package.json

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