Zaklad ssr

src/components/aircrafts/AircraftDetailSkeleton.vue

@@ -13,7 +13,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
     </q-card-section>
 
     <q-card-section class="q-my-md">
-      <BasicTextSkeleton :paragraphs="1" :lines="randomInt(1, 3)"/>
+      <BasicTextSkeleton :paragraphs="1" :lines="2"/>
     </q-card-section>
   </q-card>
 

src/components/basicSkeletons/BasicListSkeleton.vue

@@ -1,5 +1,6 @@
 <script setup>
 import {randomInt} from "src/composables/random";
+import {onBeforeMount, onMounted, ref} from "vue";
 
 const props = defineProps({
   itemsCountMin: {
@@ -12,13 +13,18 @@ const props = defineProps({
     required:false,
     default: 5
   }
+});
+
+const items = ref(0);
+onMounted(() => {
+  items.value = randomInt(props.itemsCountMin, props.itemsCountMax);
 })
 
 </script>
 
 <template>
   <q-list bordered separator>
-    <q-item v-ripple v-for="i in randomInt(itemsCountMin, itemsCountMax)" :key="i">
+    <q-item v-ripple v-for="i in items" :key="i">
       <q-item-section avatar>
         <q-skeleton type="QAvatar" />
       </q-item-section>

src/components/flights/FlightDetailSkeleton.vue

@@ -26,7 +26,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
       </q-list>
 
       <article class="q-my-lg">
-        <BasicTextSkeleton :lines="randomInt(2, 5)" :paragraphs="randomInt(1, 2)" />
+        <BasicTextSkeleton :lines="7" :paragraphs="2" />
       </article>
 
       <q-skeleton height="400px" square class="q-mt-lg"/>

src/components/flights/FlightsListSkeleton.vue

@@ -4,7 +4,7 @@ import {randomInt} from "src/composables/random";
 
 <template>
   <q-list bordered separator class="q-mx-md q-my-md">
-    <q-item v-for="i in randomInt(5, 10)" :key="i" ripple>
+    <q-item v-for="i in 10" :key="i" ripple>
       <q-item-section avatar>
         <q-avatar size="100px">
           <q-skeleton type="QAvatar" size="100px"></q-skeleton>
@@ -12,7 +12,6 @@ import {randomInt} from "src/composables/random";
       </q-item-section>
       <q-item-section>
         <q-skeleton :width="randomInt(30,50)+'%'"/>
-
           <q-skeleton type="text" :width="randomInt(10,15)+'%'"/>
           <q-skeleton type="text" :width="randomInt(5,10)+'%'"/>
           <q-skeleton type="text" width="8%"/>

src/components/photos/PhotoGallery.vue

@@ -1,14 +1,10 @@
 <script setup>
-import {onMounted, onUnmounted, ref} from "vue";
-import PhotoSwipeLightbox from "photoswipe/lightbox";
+import {onMounted, onUnmounted} from "vue";
 import 'photoswipe/style.css';
 import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
-import PhotoSwipeDynamicCaption from "photoswipe-dynamic-caption-plugin";
-import MapWithMarkers from "components/map/MapWithMarkers.vue";
-import {formatDatetime} from "src/composables/datetimeUtils";
-import EmbeddedMap from "components/map/EmbeddedMap.vue";
-import {roundWithPrecision} from "../../composables/utils";
+import PhotoSwipeDynamicCaption from "../../../node_modules/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm";
 import PhotoCaption from "components/photos/PhotoCaption.vue";
+import PhotoSwipeLightbox from "../../../node_modules/photoswipe/dist/photoswipe-lightbox.esm"
 
 
 const props = defineProps({
@@ -25,7 +21,6 @@ const props = defineProps({
 
 let $lightbox = null;
 
-
 onMounted(() => {
   if (!$lightbox) {
     $lightbox = new PhotoSwipeLightbox({

src/components/poi/POIDetailSkeleton.vue

@@ -6,12 +6,12 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
 <template>
   <div>
 
-    <BasicTextSkeleton :lines="randomInt(4, 8)" />
+    <BasicTextSkeleton :lines="4" />
 
     <q-skeleton type="rect" width="100%" class="q-my-lg" height="400px"/>
 
     <div class="row">
-      <div class="col-12 col-sm-4 col-md-4 col-lg-3" v-for="i in randomInt(3, 10)" :key="i">
+      <div class="col-12 col-sm-4 col-md-4 col-lg-3" v-for="i in 6" :key="i">
         <q-card class="q-my-sm q-mx-sm">
           <q-skeleton type="rect" width="100%" height="200px"/>
         </q-card>

src/components/profile/PublicProfileSkeleton.vue

@@ -15,7 +15,7 @@ import {randomInt} from "src/composables/random";
         <q-skeleton class="inline-block" type="text" height="40px" :width="`${randomInt(60, 90)}%`"/>
       </div>
       <div class="q-mt-lg">
-        <BasicTextSkeleton :lines="randomInt(1, 5)" :paragraphs="1"/>
+        <BasicTextSkeleton :lines="3" :paragraphs="1"/>
       </div>
     </q-card-section>
   </q-card>