Vue Wait Component

When load is delayed if it is later than the response.

Usage

$ npm install vue-wait-component
or
$ yarn add vue-wait-component

WaitList

API response wait component.

props	type	description
wait	Number	delay the loading effect
promiseMethod	Promise	api request object

WaitImg

Image response wait component.

props	type	description
wait	Number	delay the loading effect
src	String	image source url
alt	String	image description
width	Number	image width
height	Number	image height

<template>
  <div>
    <wait-list
      :wait=1000
      :promiseMethod="sample()">
      <p slot="loading">loading</p>
      <div slot="loaded">
        <li v-for="val in data" :key="val.text">
          <p>{{ val.text }}</p>
        </li>
      </div>
    </wait-list>

    <wait-img
      src="https://~~~.com/~~~.jpg"
      alt="test"
      :width=300
      :wait=100>
      <p slot="loading">loading</p>
    </wait-img>
  </div>
</template>

<script>
import { WaitList, WaitImg } from 'vue-wait-component'

export default {
  components: { WaitList, WaitImg },
  data() {
    return {
      data: [],
    };
  },
  methods: {
    sample() {
      return new Promise(resolve => {
        setTimeout(() => {
          let data = [{text: "a"}, {text: "b"}, {text: "c"}]
          resolve(data)
        }, 3000);
      }).then(response => {
        this.data = response;
      });
    },
  }
};
</script>