VueJS Promise Spinner

Render results of AJAX calls by passing promises to a spinner component.

by jsfiddle4ephi

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <spinner :promise="promise()"></spinner>
</div>

<script type="text/x-template" id="spinner">
  <div>
        <img v-if='loading' src='https://media.giphy.com/media/10kTz4r3ishQwU/giphy.gif'>
        <div v-else-if='error'>{{ error }}</div>
        <div v-else v-html="data"></div>
    </div>
</script>

Babel + JSX

Vue.component('Spinner', {
	template: "#spinner",
  props: ['promise'],
  data() {
  	return {
    	loading: true,
      error: null,
      data: null
    }
  },
  created() {
  	this.promise.then((data) => {
    	this.data = data;
      this.loading = false;
    }).catch((error) => {
    	this.error = error;
      this.loading = false;
    });
  }
});

new Vue({
  el: '#app',
  methods: {
  	promise() {
    	return new Promise(resolve => setTimeout(resolve, 3000)).then(() => '<span style="color: red; font-size: 34px">Hello, with HTML!</span>');
      //return new Promise((resolve, reject) => setTimeout(() => reject('Error!'), 3000));
    }
  }
})