API Navigation feedback

module up.feedback

The up.feedback module adds useful CSS classes to fragments while they are loading over the network.

By styling these classes you can provide instant feedback to user interactions, improving the perceived speed of your interface.

Example

Let's say we have an <nav> element with two links, pointing to /foo and /bar respectively:

<nav>
  <a href="/foo" up-follow>Foo</a>
  <a href="/bar" up-follow>Bar</a>
</nav>

By giving the navigation bar the [up-nav] attribute, links pointing to the current browser address are highlighted as we navigate through the site.

While the current URL is /foo, the first link is automatically marked with an .up-current class. We also assign an [aria-current] attribute to convey the highlighted link to assistive technologies:

<nav up-nav>
  <a href="/foo" up-follow class="up-current" aria-current="page">Foo</a>
  <a href="/bar" up-follow>Bar</a>
</nav>

When the user clicks on the /bar link, the link will receive the .up-active class while it is waiting for the server to respond. The targeted fragment (the <main> element) gets the .up-loading class:

<nav up-nav>
  <a href="/foo" up-follow class="up-current" aria-current="page">Foo</a>
  <a href="/bar" up-follow class="up-active">Bar</a>
</div>

<main class="up-loading">
  Foo content
</main>

Once the response is received the .up-active and .up-loading classes are removed. Since the new URL is /bar, the .up-current class has been moved to the "Bar" link.

<nav up-nav>
  <a href="/foo" up-follow>Foo</a>
  <a href="/bar" up-follow class="up-current" aria-current="page">Bar</a>
</nav>

<main>
  Bar content
</main>

Enabling navigation feedback

Navigation feedback is enabled per default when navigating.

When rendering without navigation, you may enable feedback by setting an [up-feedback] attribute or by passing a { feedback } option:

up.render('.preview', { url: '/preview', feedback: true })

When watching fields you may show navigation feedback while an async callback is running.