Как сделать Skeleton загрузку на vue?

Question

[DocTypeMaster]

Здравствуйте, подсмотрел код реализации скелетон загрузки, но тут в примере данные выводятся статично и не понятно как применить его для вывода из базы и соответственно сделать цикл для вывода

<template>
  <div class='profile-card'>
    <div class='profile-image'>
      <img class='profile-image__border' src='/img-border.png' />
      <img class='profile-image__img' :src='userData.pic' />
    </div>
    <div class='profile-info'>
      <span> Written By </span>
      <h3> {{ userData.name }} </h3>
      <p> {{ userData.bio }} </p>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue'

const loadUserData = async () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        name: 'Matt Maribojoc',
        pic: 'https://learnvue.co/wp-content/uploads/2020/04/img-border.png',
        bio: 'I run a VueJS community over at https://learnvue.co, develop web sites, and post whatever I find cool on the Internet.'
      })
    }, 4000)
  })
}

export default {
  async setup () {
    const userData = ref(await loadUserData())

    return {
      userData
    }
  }
}

</script>

Если кто-то знает, подскажите !

Comments

[Aetae]

Что конкретно непонято? Не можешь заменить setTimeout на запрос к серверу?

[DocTypeMaster]

Aetae, через аxios ?

const loadUserData = async () => {
  return new Promise(resolve => {
   fetch() {
       axios.get('/articles').then((response) => {
         console.log(response)
         this.article = response.data
       })
     },
  })
}

[Aetae]

DocTypeMaster, ты видишь использование this в примере? Или fetch?
Судя по всему ты вообще не знаешь javascript. Изучи основы, а потом возвращайся.

То что я тебе напишу ответ, вида:

const loadUserData = () => axios.get('/articles').then((response) => response.data);

тебе нифига не поможет, ты через 5 минут снова споткнёшься на ровном месте.

Answer 1

[Иван Байков]

Можете воспользоваться suspense(vue3) или написать реализацую v-if и + observer,
Пример простой реализации:
Компонент Skeleton

<template>
  <div class="lazy-load__component">
    <component v-intersection="handleShowComponent" v-if="!isComponentVisible" :is="skeleton" />
    <template v-else>
       <slot />
   </template>
  </div>
</template>

<script>
export default {
  components: {
    allSkeletons: () => import("path/to/skeletons")
  },
  directives: {
    intersection: {
      inserted: (el, binding) => {
        window.addEventListener("load", () => {
          const options = {
          rootMargin: "0px",
          threshold: 1
        };

        const callback = entries => {
          if (entries[0].isIntersecting) {
            binding.value();
            observer.unobserve(el);
          }
        };

        const observer = new IntersectionObserver(callback, options);
        observer.observe(el);
        });
      },
    }
  },
  },
  props: {
     skeleton: {
        type: String,
        default: 'default-skeleton'
     }
  },
  data() {
    return {
      isComponentVisible: false,
    };
  },
  computed: {
    skeleton() {
      return allSkeletons[this.skeleton];
    },
  },
  methods: {
    handleShowComponent() {
      this.isComponentVisible = true;
    },
  },
};
</script>

Компонент с использованием Skeleton

<template>
  <Skeleton skeleton="someSkeleton">
      <div>
        Some content
      </div>
  </Skeleton>
</template>

<script>
export default {
  components: {
    Skeleton: () => import("path/to/skeleton")
  }
};
</script>