Loading States#

Unicorn requires an AJAX request for any component updates, so it is helpful to provide some context to the user that an action is happening.

Toggling Elements#

Elements with the unicorn:loading attribute are only visible when an action is in process.

<!-- loading.html -->
<div>
  <button unicorn:click="update">Update</button>

  <div unicorn:loading>Updating!</div>
</div>

When the Update button is clicked, the “Updating!” message will show until the action is complete, and then it will re-hide itself.

Warning

Loading elements get shown or removed with the hidden attribute. One drawback to this approach is that setting the style display property overrides this functionality.

You can also hide an element while an action is processed by adding a remove modifier.

<!-- loading-remove.html -->
<div>
  <button unicorn:click="update">Update</button>

  <div unicorn:loading.remove>Not currently updating!</div>
</div>

If there are multiple actions that happen in the component, you can show or hide a loading element for a specific action by targeting another element’s id with unicorn:target.

<!-- loading-target-id.html -->
<div>
  <button unicorn:click="update" id="updateId">Update</button>
  <button unicorn:click="delete" id="deleteId">Delete</button>

  <div unicorn:loading unicorn:target="updateId">Updating!</div>
  <div unicorn:loading unicorn:target="deleteId">Deleting!</div>
</div>

An element’s unicorn:key can also be targeted.

<!-- loading-target-key.html -->
<div>
  <button unicorn:click="update" unicorn:key="updateKey">Update</button>
  <button unicorn:click="delete" unicorn:key="deleteKey">Delete</button>

  <div unicorn:loading unicorn:target="updateKey">Updating!</div>
  <div unicorn:loading unicorn:target="deleteKey">Deleting!</div>
</div>

Note

An asterisk can be used as wildcard to target more than one element at a time.

<!-- loading-target-wildcard-id.html -->
<div>
  <button unicorn:click="update" id="update1Id">Update 1</button>
  <button unicorn:click="update" id="update2Id">Update 2</button>

  <div unicorn:loading unicorn:target="update*Id">Updating!</div>
</div>

Toggling Attributes#

Elements with an action event can also include an unicorn:loading attribute with either an attr or class modifier.

attr#

Set the specified attribute on the element that is triggering the action.

This example will disable the Update button when it is clicked and remove the attribute once the action is completed.

<!-- loading-attr.html -->
<div>
  <button unicorn:click="update" unicorn:loading.attr="disabled">Update</button>
</div>

class#

Add the specified class(es) to the element that is triggering the action.

This example will add loading and spinner classes to the Update button when it is clicked and remove the classes once the action is completed.

<!-- loading-class.html -->
<div>
  <button unicorn:click="update" unicorn:loading.class="loading spinner">Update</button>
</div>

class.remove#

Remove the specified class from the element that is triggering the action.

This example will remove a active class from the Update button when it is clicked and add the class back once the action is completed.

<!-- loading-class-remove.html -->
<div>
  <button unicorn:click="update" unicorn:loading.class.remove="active">
    Update
  </button>
</div>