Aircraft CRUD

src/pages/profile/lists/AircraftsPage.vue

@@ -1,40 +1,28 @@
 <script setup>
 import {useAircraftsStore} from "stores/Aircrafts";
-import {computed, onMounted, ref} from "vue";
+import {onMounted, ref} from "vue";
 import {storeToRefs} from "pinia";
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
 import AddFAB from "components/AddFAB.vue";
+import AircraftsListSkeleton from "components/aircrafts/AircraftsListSkeleton.vue";
 
 const aircraftStore = useAircraftsStore();
 const aircrafts = storeToRefs(aircraftStore).items;
-const aircraftsComputed = computed(() => aircraftStore.items);
-
-const refetch = () => {
-  loading.value = true
-  aircraftStore.fetch().then(data => console.log("data", data)).finally(() => {
-    console.log("after fetch");
-    loading.value = false
-  });
-}
 
 let loading = ref(false);
 onMounted(() => {
-  refetch();
+  loading.value = true
+  aircraftStore.fetch().finally(() => {
+    loading.value = false
+  });
 })
 </script>
 
 <template>
-  <q-skeleton v-if="loading">Loading (sem pridat skeleton)</q-skeleton>
+  <h4>Letadla</h4>
 
+  <AircraftsListSkeleton v-if="loading" />
   <AircraftsList :items="aircrafts" v-if="!loading"/>
 
-  <q-btn @click="refetch()">Fetch</q-btn>
-
-  {{ aircrafts }}
-  <br>
-  {{ aircraftsComputed }}
-  <br>
-  {{ aircraftStore.items }}
-
   <AddFAB :router-link="{name: 'addAircraft'}"/>
 </template>