useIsRouting

useIsRouting gives you a signal for when the router is routing.

tsx
const isRouting
const isRouting: () => boolean = useIsRouting
(alias) useIsRouting(): () => boolean
import useIsRouting()

tsx
const isRouting
const isRouting: () => boolean = useIsRouting
(alias) useIsRouting(): () => boolean
import useIsRouting()

Usage

Getting a signal indicating whether the router navigation is in progress

useIsRouting returns a signal that is true when the router is changing to the next route, and false otherwise. It does so by tapping into Solid's Transitions. This signal is not set on initial page render but on any subsequent navigation.

js
const isRouting = useIsRouting();
return (
  <div classList={{ "grey-out": isRouting() }}>
    <MyAwesomeContent />
  </div>
);

js
const isRouting = useIsRouting();
return (
  <div classList={{ "grey-out": isRouting() }}>
    <MyAwesomeContent />
  </div>
);

It is intended to be used to show that the current page is stale, and will be leaving view. Once the new page has been transitioned to the signal is set to false. The new page may not be fully loaded at this time as any nested Suspense boundary may still be loading when the route transition has ended.

Reference

useIsRouting()

Call useIsRouting() inside a component to get a signal to indicate the router is transitioning.

tsx
import { useIsRouting
(alias) const useIsRouting: () => () => boolean
import useIsRouting } from "solid-start";
 
function Component
function Component(): void() {
  const isRouting
const isRouting: () => boolean = useIsRouting
(alias) useIsRouting(): () => boolean
import useIsRouting();
}

tsx
import { useIsRouting
(alias) const useIsRouting: () => () => boolean
import useIsRouting } from "solid-start";
 
function Component
function Component(): void() {
  const isRouting
const isRouting: () => boolean = useIsRouting
(alias) useIsRouting(): () => boolean
import useIsRouting();
}

Returns

A signal which contains a boolean value.