<script setup>
import { computed, onMounted, ref } from 'vue';
import Loader from '@/components/Loader.vue';
import Image from '@/components/Image.vue';
import { preload } from '@/utils/preload';

const loading = ref(true);
const percent = ref(0);
const resources = ref([]);

const updateCallback = (num) => {
  percent.value = Math.round(num * 100);
}

onMounted(() => {
  preload(updateCallback).then((res) => {
    loading.value = false;
    resources.value = res;
  })
});
</script>

<template>
  <Loader :loading="loading" :percent="percent" />
  <Image v-for="res in resources" :key="res.image" :resource="res"></Image>
</template>

<style scoped>
</style>
