Loading indicator / spinner#

A common pattern is showing loading indicators (also called "spinner"), whenever a request duration is longer than the usual user is inclined to wait, without getting nervous...

There are several spinners available in frameworks like Bootstrap or tabler.io (which builds upon BS5). Even Tailwind uses an animation class to produce spinners.

Tetra tries to be as framework-agnostic as possible, here we'll use Boostrap 5 in the example:

# spinner/__init__.py
from time import sleep
from tetra import Component, public


class Spinner(Component):

    @public
    def long_lasting_process(self):
        sleep(2)

<!-- spinner.html -->
{% load i18n %}
<div {% ... attrs %}>
  <!-- spinner within button -->
  <div class="mb-2">
    <button class="btn btn-primary" type="button"
            @click="long_lasting_process()">
      <span class="tetra-indicator spinner-border spinner-border-sm me-2"></span>
      {% translate "Load data (local spinner)" %}
    </button>
  </div>

  <!-- external spinner -->
  <div class="d-flex align-items-center gap-2">
    <button class="btn btn-primary" type="button"
            @click="long_lasting_process()"
            t-indicator="#spinner-external">
      {% translate "Load data (external spinner)" %}
    </button>
  </div>
</div>

The spinner is hidden by default and shown when a tetra request is in flight.

You can also achieve the hiding with opacity: 0 and opacity:1 with a transition to make it smoother, see the spinner documentation for details.

You can click the buttons below, the spinners are shown for the period of the tetra request and hidden again afterwords, regardless of where the spinner is located in the page.

External spinner on the page (outside the component):

Demo