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

templatediv    !-- 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      !-- Your real loaded data goes in here. --      p{{myData}}/p    /div  /div/templatescriptimport { 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" 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" 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:

templatediv  !-- Displays if myData is not set. --  facebook-loader v-if="!myData"    :speed="2"  /facebook-loader  div v-else    !-- Your real loaded data goes in here. --    p{{myData}}/p  /div/div/templatescriptimport { FacebookLoader } from 'vue-content-loader';// Or: InstagramLoader | CodeLoader | ListLoader | BulletListLoaderexport 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