Loading States

Because django-unicorn requires an AJAX request for any component updates, 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.

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 specifc action by targetting 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>

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 to the element that is triggering the action.

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

<!-- loading-class.html -->
<div>
    <button unicorn:click="update" unicorn:loading.class="loading">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>