Loading state - Unpoly

Unpoly offers many tools to show loading state after a user interaction.

This is an overview of all available strategies to signal that the app is working, or to provide clues for how the page will ultimately look.

Styling loading elements

Unpoly adds CSS classes to interactive elements that are loading content, and to the fragments they are targeting:

<a href="/bar" up-target="#target" class="up-active">Bar</a> <!-- mark-phrase "up-active" -->

<div id="target" class="up-loading"> <!-- mark-phrase "up-loading" -->
  Initial content
</div>

See Feedback classes for details and examples.

Showing placeholders

Placeholders are temporary spinners or UI skeletons shown while a fragment is loading:

<a href="/path" up-target="#target" up-placeholder="Loading…">Show story</a> <!-- mark-phrase "Loading…" -->

<div id="#target">
  Loading… <!-- mark-phrase "Loading…" -->
</div>

See Placeholders for details and examples.

Arbitrary status effects

Using previews you can make arbitrary page changes while waiting for a network request.

up.preview('link-spinner', function(preview) {
  let link = preview.origin
  preview.insert(link, '<img src="spinner.gif">')
})

When the request ends for any reason, all preview changes will be reverted before the server response is processed. This ensures a consistent screen state in cases when a request is aborted, or when we end up updating a different fragment.

See Previews for details and examples.

Optimistic rendering

Optimistic rendering is an advanced pattern where we update the page without waiting for the server to respond. When the server eventually does respond, the optimistic change is reverted and replaced by the server-confirmed content.

See Optimistic rendering for details and examples.

Disabling forms while working

Unpoly lets you disable fields and buttons while a form is submitting:

<form up-submit up-disable action="/session"> <!-- mark-phrase "up-disable" -->
  <input type="text" name="email">        <!-- will be disabled -->
  <input type="password" name="password"> <!-- will be disabled -->
  <button type="submit">Sign in</button>  <!-- will be disabled -->
</form>

See Disabling forms while working for details and examples.

Global progress bar

When requests are taking long to load, Unpoly will show a thin progress bar at the top edge of the screen:

Progress bar animation

This mimics similar loading indicators by browsers, which only appear during full page loads.

See Progress bar for details and examples.

Signaling severe network problems

Unpoly provides events to handle network issues like disconnects or flaky connections:

up.on('up:fragment:offline', function(event) { // mark-phrase "up:fragment:offline"
  if (confirm('You are offline. Retry?')) event.retry()
})

See Handling network issues for details and examples.

API Loading state