Loading

A loading indicator, such as a spinner, provides users with feedback when an interface is in an indeterminate state as a result of their action, to help manage their expectations. A loading indicator can be used to communicate:

• Content is being loaded onto the page.
• A background process is occurring.

A loading action, such as a 'Load more' button, gives users a sense of control when fetching more items and is used to:

• Indicate more items are available for the current list.
• Prepare the user for what is about to happen.
• Empower the user to choose when loading occurs.

In Pajamas, the following methods indicate and initiate loading:

• Loading animation and placeholders
• Loading more
• Progressive loading

Loading animation and placeholders

Loading more

The load more interaction is a more accessible alternative to infinite scroll. It allows a user to load more results by clicking a 'Load more' button. The button text can optionally include the number of items that will be loaded, for example, 'Load 20 more'.

<script>
  export default {
    data() {
      return {
        items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
        isLoading: false,
        maxItems: 20,
      };
    },
    computed: {
      hasMore() {
        return this.items.length < this.maxItems;
      },
    },
    methods: {
      loadMore() {
        this.isLoading = true;
        setTimeout(() => {
          const count = this.items.length;
          this.items.push(
            `Item ${count + 1}`,
            `Item ${count + 2}`,
            `Item ${count + 3}`,
            `Item ${count + 4}`,
            `Item ${count + 5}`,
          );
          this.isLoading = false;
        }, 600);
      },
    },
  };
</script>

<template>
  <div class="gl-space-y-4 gl-bg-default">
    <ul class="gl-m-0 gl-list-none gl-space-y-3 gl-p-0">
      <li v-for="item in items" :key="item" class="gl-border-b gl-p-3">{{ item }}</li>
    </ul>
    <div v-if="hasMore" class="gl-flex gl-justify-center">
      <gl-button
        size="small"
        category="tertiary"
        variant="confirm"
        :loading="isLoading"
        @click="loadMore"
        >Load 5 more</gl-button
      >
    </div>
  </div>
</template>

The load more interaction can be used for a set of similar items:

• With content that updates frequently.
• Without sort or filter functionality.
• That doesn't use pagination to provide a preset number of results per view.

Behavior

• The 'Load more' button is present at the end of a list only when there are more items available. The button is centered within the container and uses the confirm variant and small size.
• Clicking the button loads more results inline and moves the button to the end of the list if there are more items that can be loaded.
• After clicking the button, the user's current position is maintained by moving focus to the first element appended to the current items.
• The number of initial results, and results that load after clicking the button, is adjustable based on the scenario. For example, it could be better to load 20 more single-line items, versus loading only 10 more multi-line items that would take more time to scan.
• Loading more is a one-way action. If showing less is necessary, the expand and collapse behavior would be a better fit, like an accordion.

Progressive loading