Loading image when next page is rendering

[joeatwork91]

For when next button is clicked, when rendering next page, the image of previous page will stay until the new image is loaded, I think we should add a loading.gif to display before everything is rendered. It looks like a bug when next page is selected.

[TahaSh]

You can do this by adding a loading flag to your component. This flag should be changed to true when the pagination is changed and to false when the image is loaded, like this:

<template>
  <paginate
    name="items"
    :list="items"
    :per="1"
  >
    <li
      v-for="item in paginated('items')"
      :key="item"
    >
      <span v-if="loading">Loading...</span>
      <img
        v-show="!loading"
        :src="item"
        @load="loading = false"
      >
    </li>
  </paginate>
</template>

<script>
export default {
  data () {
    return {
      // your other data properties
      loading: true
    }
  }
}
</script>

Of course, you can change the loader to anything else you want.