Displaying Content Placeholders in Vue.js with vue-content-loader

You might not have noticed yet, but several major apps are migrating away from the indefinite loading circle indicator paradigm (say that five times fast). Why? Because, while it’s better than nothing, it still makes users feel impatient waiting for their content to load. So what do they use instead? Loading placeholders. They’re usually low-contrast blocks that have the approximate shape of the intended content, sometimes animated. You’ve probably noticed such elements on Slack, Instagram, or even Facebook! We wrote a guide on how to make them yourself, but there’s a great Vue.js component that can provide such elements for you: vue-content-loader.

Dependencies

This guide assumes you have a Vue.js project already set up. If not, go ahead and start a new Vue project using vue-cli 3.0 and the default options. Running $ vue create my-new-project and hitting enter a couple times should be sufficient.

Next, install vue-content-loader from npm:

$ npm install vue-content-loader

Note: This is a component, not a plugin, so we don’t need to enable anything in main.js here.

Usage

<template>
<div class="content-wrapper">
    <!-- Displays if myData is not set.
    Options
    speed: Number - How many seconds between pulses of the loader.
    height / width: Number - size of the loader contents.
    primaryColor: String - The color of the elements.
    secondaryColor: String - The color of the pulser.
    animate: Boolean - Whether or not to display the pulser.
    -->
    <content-loader v-if="!myData"
      :speed="2"
      :animate="true"
    ></content-loader>
    <div v-else class="my-real-content">
      <!-- Your real loaded data goes in here. -->
      <p>{{myData}}</p>
    </div>
  </div>
</template>

<script>
import { ContentLoader } from 'vue-content-loader';

export default {
  components: {
    ContentLoader
  },

  data() {
    return {
      myData: null
    }
  },

  mounted() {
    // Just pretend this is an AJAX call. Use your imagination.
    setTimeout(() => {
      this.myData = 'Example Data';
    }, 5000);
  }
}
</script>

Well, that’s underwhelming. Just a little boring square. :/ The ContentLoader component is actually supposed to be a wrapper for your own custom loader SVG elements. WHAT?! You scream. I HAVE TO GO MAKE MY OWN SVGS FOR A CONTENT LOADER?

Umm, yes! There’s a fancy online GUI tool that will generate the code for you! Not bad at all!

Here’s a cute-little car-shaped one I made using that generator: (I tried to make an alligator, but I lack the necessary skills and fine motor control.)

<content-loader>
  <circle cx="333.40099117860757" cy="371.67099117860755" r="45.40099117860754"/>
  <circle cx="132.26035793053342" cy="377.5303579305334" r="45.260357930533424"/>
  <circle cx="289.53897688809354" cy="305.8089768880935" r="54.53897688809353"/>
  <rect x="80.04" y="312.09" rx="0" ry="0" width="324" height="66" transform="rotate(0.06, 80.04, 312.09)"/>
  <circle cx="163.7954915950234" cy="303.06549159502345" r="48.79549159502341"/>
  <rect x="159.7" y="255.09" rx="0" ry="0" width="131" height="64" transform="rotate(357.56, 159.7, 255.09)"/>
</content-loader>

Still too much effort? vue-content-loader comes with a number of built-in styles, including:

Facebook

Bullet

Code

List

Instagram

These can be used by simply importing them directly from vue-content-loader and using them in place of the content-loader component:

<template>
<div class="content-wrapper">
  <!-- Displays if myData is not set. -->
  <facebook-loader v-if="!myData"
    :speed="2"
  ></facebook-loader>
  <div v-else class="my-real-content">
    <!-- Your real loaded data goes in here. -->
    <p>{{myData}}</p>
  </div>
</div>
</template>

<script>
import { FacebookLoader } from 'vue-content-loader';
// Or: InstagramLoader | CodeLoader | ListLoader | BulletListLoader

export default {
  components: {
    FacebookLoader
  },

  data() {
    return {
      myData: null
    }
  },

  mounted() {
    // Just pretend this is an AJAX call. Use your imagination.
    setTimeout(() => {
      this.myData = 'Example Data';
    }, 5000);
  }
}
</script>