Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 3 additions & 6 deletions examples/next-app-router/components/NavigationProgress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ export function useNavigationProgress() {
return context
}

// Watches pathname/searchParams changes to detect when navigation has
// completed. Wrapped in Suspense because useSearchParams() requires a Suspense
// boundary.
// Wrapped in Suspense because useSearchParams() requires a Suspense boundary.
function NavigationComplete({ onComplete }: { onComplete: () => void }) {
const pathname = usePathname()
const searchParams = useSearchParams()
Expand All @@ -49,9 +47,8 @@ function NavigationComplete({ onComplete }: { onComplete: () => void }) {
return null
}

// Provides navigation progress state to the component tree. Navigation start is
// signalled via the onNavigate prop on a <ProgressLink>, and completion is
// detected by watching usePathname()/useSearchParams().
// Navigation start is signalled via onNavigate on a <ProgressLink>; completion
// is detected by watching usePathname()/useSearchParams().
export default function NavigationProgress({
children,
}: {
Expand Down
5 changes: 2 additions & 3 deletions examples/next-app-router/components/ProgressLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@ import Link from 'next/link'

import { useNavigationProgress } from './NavigationProgress'

// A thin wrapper around next/link that signals navigation start via the
// onNavigate callback introduced in Next.js 15.3. Use this in place of <Link>
// wherever you want the progress bar to appear during navigation.
// Uses the onNavigate callback introduced in Next.js 15.3 to signal navigation
// start to <NavigationProgress>.
export default function ProgressLink(props: React.ComponentProps<typeof Link>) {
const { start } = useNavigationProgress()

Expand Down
9 changes: 2 additions & 7 deletions examples/react-router-v6/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -118,11 +118,6 @@ const Progress: FC<{ isAnimating: boolean }> = ({ isAnimating }) => {
return (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
{/*
This example doesn't use a spinner component so the UI stays
tidy. You're free to render whatever is appropriate for your
use-case.
*/}
</Container>
)
}
Expand All @@ -135,8 +130,8 @@ const Home = () => {
return (
<>
{/*
Setting a key means that a new NProgress instance is created if
the location is changing, giving us the UI behaviour we want. See:
A key change creates a new NProgress instance, resetting progress
when the location changes. See:
https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key.
*/}
<Progress isAnimating={isLoading} key={location.key} />
Expand Down
2 changes: 0 additions & 2 deletions test/useGetSetState.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -95,12 +95,10 @@ it('should get and set expected state when used in nested functions', () => {
const { result } = setUp({ counter: 0 })
const [get, set] = result.current

// Simulate 3 clicks.
onClick()
onClick()
onClick()

// Fast-forward until all timers have been executed.
act(() => {
jest.runAllTimers()
})
Expand Down