Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://nextjs.org/docs/app/api-reference/functions/use-link-status below:

Functions: useLinkStatus | Next.js

The useLinkStatus hook lets you tracks the pending state of a <Link>. You can use it to show inline visual feedback to the user (like spinners or text glimmers) while a navigation to a new route completes.

useLinkStatus is useful when:

• Prefetching is disabled or in progress meaning navigation is blocked.
• The destination route is dynamic and doesn't include a loading.js file that would allow an instant navigation.

'use client'
 
import { useLinkStatus } from 'next/link'
 
export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? (
    <div role="status" aria-label="Loading" className="spinner" />
  ) : null
}

import Link from 'next/link'
import LoadingIndicator from './loading-indicator'
 
export default function Header() {
  return (
    <header>
      <Link href="/dashboard" prefetch={false}>
        Dashboard <LoadingIndicator />
      </Link>
    </header>
  )
}

Good to know:

• useLinkStatus must be used within a descendant component of a Link component
• The hook is most useful when prefetch={false} is set on the Link component
• If the linked route has been prefetched, the pending state will be skipped
• When clicking multiple links in quick succession, only the last link's pending state is shown
• This hook is not supported in the Pages Router and will always return { pending: false }

const { pending } = useLinkStatus()

useLinkStatus does not take any parameters.

useLinkStatus returns an object with a single property:

It's helpful to add visual feedback that navigation is happening in case the user clicks a link before prefetching is complete.

'use client'
 
import { useLinkStatus } from 'next/link'
 
export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? (
    <div role="status" aria-label="Loading" className="spinner" />
  ) : null
}

import Link from 'next/link'
import LoadingIndicator from './components/loading-indicator'
 
const links = [
  { href: '/shop/electronics', label: 'Electronics' },
  { href: '/shop/clothing', label: 'Clothing' },
  { href: '/shop/books', label: 'Books' },
]
 
function Menubar() {
  return (
    <div>
      {links.map((link) => (
        <Link key={link.label} href={link.href}>
          {link.label} <LoadingIndicator />
        </Link>
      ))}
    </div>
  )
}
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <Menubar />
      {children}
    </div>
  )
}

If the navigation to a new route is fast, users may see an unnecessary flash of the loading indicator. One way to improve the user experience and only show the loading indicator when the navigation takes time to complete is to add an initial animation delay (e.g. 100ms) and start the animation as invisible (e.g. opacity: 0).

.spinner {
  /* ... */
  opacity: 0;
  animation:
    fadeIn 500ms 100ms forwards,
    rotate 1s linear infinite;
}
 
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
 
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4