Bugfixing

src/pages/public/PointOfInterestDetailPage.vue

@@ -1,3 +1,13 @@
+<script>
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+
+export default {
+  preFetch({currentRoute}) {
+    return usePointsOfInterestStore().fetchPublicDetail(currentRoute.params.id);
+  }
+}
+</script>
+
 <script setup>
 import {storeToRefs} from "pinia";
 import {usePhotosStore} from "stores/Photos";
@@ -11,23 +21,13 @@ import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-import {onServerPrefetch} from "vue";
-import {useRoute} from "vue-router";
-
-const $route = useRoute();
-
-onServerPrefetch(() => {
-  return usePointsOfInterestStore().fetchPublicDetail($route.params.id);
-});
+import {onMounted} from "vue";
+import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
 
 const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
 const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 
-usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
-useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
-
 useAppStore().setPageTitle(pointOfInterest.value.name);
 useMeta(() => metaData({
   title: pointOfInterest.value.name,
@@ -38,6 +38,12 @@ useAppStore().setBreadcrumbs([
   {to: {name: 'homepage'}, label: "Polétání.cz"},
   {label: pointOfInterest.value.name}
 ]);
+
+onMounted(() => {
+  usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
+  useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
+});
+
 </script>
 
 <template>
@@ -54,7 +60,8 @@ useAppStore().setBreadcrumbs([
             :zoom="13"
         />
 
-        <PhotoGallery :photos="photos" class="q-my-lg"/>
+        <PhotoGallerySkeleton v-if="arePhotosLoading && !pointOfInterest" />
+        <PhotoGallery :photos="photos" class="q-my-lg" v-else />
 
         <h3>Lety na místo {{ pointOfInterest.name }}</h3>