summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2022-09-18 14:24:32 +0200
committerSanto Cariotti <santo@dcariotti.me>2022-09-18 14:24:32 +0200
commit5d74f6c7c09ceb4b68bd0265e6c641192080d994 (patch)
tree443445654ffbf427fb4f5353fe70756c9fb3a0e1
parent683cd8be5d6cf42cce58eae4134459ee60658e8c (diff)
Add model loading component
-rw-r--r--assets/sass/_models.sass0
-rw-r--r--assets/sass/main.sass4
-rw-r--r--components/ModelLoading.vue17
-rw-r--r--pages/index.vue16
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>