Homepage, lepsi POI

src/components/basicSkeletons/BasicListSkeleton.vue

@@ -0,0 +1,30 @@
+<script setup>
+import {randomInt} from "src/composables/random";
+
+const props = defineProps({
+  itemsCountMin: {
+    type: Number,
+    required:false,
+    default: 2
+  },
+  itemsCountMax: {
+    type: Number,
+    required:false,
+    default: 5
+  }
+})
+
+</script>
+
+<template>
+  <q-list bordered separator>
+    <q-item v-ripple v-for="i in randomInt(itemsCountMin, itemsCountMax)" :key="i">
+      <q-item-section avatar>
+        <q-skeleton type="QAvatar" />
+      </q-item-section>
+      <q-item-section>
+        <q-skeleton :width="randomInt(10,25)+'%'" />
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>

src/components/basicSkeletons/BasicTextSkeleton.vue

@@ -0,0 +1,23 @@
+<script setup>
+import {randomInt} from "src/composables/random";
+
+const props = defineProps({
+  lines: {
+    type: Number,
+    required: false,
+    default: 3
+  },
+  paragraphs: {
+    type: Number,
+    required: false,
+    default: 1
+  }
+})
+</script>
+
+<template>
+  <div v-for="i in paragraphs" :key="i">
+    <q-skeleton type="text" :width="randomInt(80, 100)+'%'" v-for="j in lines - 1" :key="j"/>
+    <q-skeleton type="text" :width="randomInt(15, 100)+'%'"/>
+  </div>
+</template>

src/components/basicSkeletons/ListItemSkeleton.vue

@@ -0,0 +1,15 @@
+<script setup>
+
+import {randomInt} from "src/composables/random";
+</script>
+
+<template>
+  <q-item>
+    <q-item-section avatar>
+      <q-skeleton type="QAvatar" size="30px"/>
+    </q-item-section>
+    <q-item-section>
+      <q-skeleton type="text" :width="randomInt(50, 100)+'px'"/>
+    </q-item-section>
+  </q-item>
+</template>