diff options
| -rw-r--r-- | assets/sass/_models.sass | 0 | ||||
| -rw-r--r-- | assets/sass/main.sass | 4 | ||||
| -rw-r--r-- | components/ModelLoading.vue | 17 | ||||
| -rw-r--r-- | pages/index.vue | 16 |
4 files changed, 37 insertions, 0 deletions
diff --git a/assets/sass/_models.sass b/assets/sass/_models.sass new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/assets/sass/_models.sass diff --git a/assets/sass/main.sass b/assets/sass/main.sass index 7a00fd3..be81a19 100644 --- a/assets/sass/main.sass +++ b/assets/sass/main.sass @@ -1 +1,5 @@ @import "_bootstrap" +@import "_models" + +body + background-color: #f3f4f6 diff --git a/components/ModelLoading.vue b/components/ModelLoading.vue new file mode 100644 index 0000000..5db1c51 --- /dev/null +++ b/components/ModelLoading.vue @@ -0,0 +1,17 @@ +<template lang="pug"> + .grid.grid-cols-4.gap-4 + .model.shadow-xlg.rounded-lg.bg-white.p-4.w-full.h-80.animate-pulse + .image.bg-green-100.rounded-xl.w-full.h-48 + .space-y-3.mt-5 + .grid.grid-cols-3.gap-4 + .h-4.bg-green-100.rounded-xl.col-span-2 + .h-4.bg-green-100.rounded-xl.col-span-1 + .h-4.bg-green-100.rounded-xl + +</template> + +<script> +export default { + name: "ModelLoading", +}; +</script> diff --git a/pages/index.vue b/pages/index.vue index 75876fa..2c84032 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,13 +1,29 @@ <template lang="pug"> .mx-auto.max-w-7xl.py-6(class="sm:px-6 lg:px-8") + model-loading(v-if="isLoading") + </template> <script> +import ModelLoading from "@/components/ModelLoading.vue"; + +import { mapGetters } from "vuex"; + export default { name: "IndexPage", layout: "default", head: { title: "Verden - Social for 3D artists", }, + components: { + "model-loading": ModelLoading, + }, + computed: { + ...mapGetters(["isLoading"]), + ...mapGetters("auth", ["isLogged"]), + }, + created() { + this.$store.dispatch("models/getModels"); + }, }; </script> |