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>