From 33e7aa6e362673549b620f76521f88a195d81295 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Tue, 6 Jan 2026 22:02:24 +0100
Subject: [PATCH] lepsi infinite scroll

---
 src/components/FAB.vue                        |   7 +-
 src/components/ListFilters.vue                |  19 ++-
 src/components/LoadMoreList.vue               |  41 ------
 src/components/PrimaryAction.vue              |  46 ++++++
 src/components/aircrafts/AircraftsList.vue    |  97 ++++++------
 .../flightPlans/FlightPlansList.vue           |  60 +++++---
 src/components/flights/FlightsList.vue        | 139 ++++++++----------
 src/components/poi/POIList.vue                |  76 ++++------
 src/composables/pagination.js                 |  64 +++++++-
 src/graphql/fragments/flight.js               |   1 -
 src/graphql/queries/aircrafts.js              |   6 +-
 src/graphql/queries/flightPlan.js             |  13 +-
 src/graphql/queries/flights.js                |   3 +-
 src/pages/profile/aircraft/AircraftsPage.vue  |  28 ++--
 src/pages/profile/flight/FlightsPage.vue      |  27 ++--
 .../profile/flightPlanner/FlightPlansPage.vue |  25 +++-
 .../profile/poi/PointsOfInterestPage.vue      |  29 ++--
 src/pages/public/poi/PointsOfInterestPage.vue |  20 +--
 src/stores/Aircrafts.js                       |   7 +-
 src/stores/FlightPlans.js                     |  16 +-
 src/stores/Flights.js                         |   3 +
 src/stores/PointsOfInterest.js                |   2 +-
 22 files changed, 381 insertions(+), 348 deletions(-)
 delete mode 100644 src/components/LoadMoreList.vue
 create mode 100644 src/components/PrimaryAction.vue

diff --git a/src/components/FAB.vue b/src/components/FAB.vue
index e8b9dc9..821e764 100644
--- a/src/components/FAB.vue
+++ b/src/components/FAB.vue
@@ -13,7 +13,6 @@ const props = defineProps({
 })
 
 const config = computed(() => {
-
   if (props.mode === "add") {
     return {icon: "add", label: "Přidat"};
   } else if (props.mode === "edit") {
@@ -26,7 +25,11 @@ const config = computed(() => {
 </script>
 
 <template>
-  <q-page-sticky location="bottom" :offset="[30, 30]">
+  <q-page-sticky
+    location="bottom"
+    :offset="[30, 30]"
+    v-if="$q.screen.lt.md"
+  >
     <q-fab :icon="config.icon" color="primary" :label="config.label" @click="$router.push(props.routerLink)"/>
   </q-page-sticky>
 </template>
diff --git a/src/components/ListFilters.vue b/src/components/ListFilters.vue
index 0679089..80709e8 100644
--- a/src/components/ListFilters.vue
+++ b/src/components/ListFilters.vue
@@ -38,14 +38,23 @@ onMounted(() => {
 
   if (search) {
     filters.value.search = search;
+  } else {
+    filters.value = {};
   }
 })
 </script>
 
 <template>
-  <q-input v-model="filters.search" placeholder="Vyhledávání..." v-bind="commonProps" clearable>
-    <template #prepend>
-      <q-icon name="search"/>
-    </template>
-  </q-input>
+  <div class="flex">
+    <div class="col-grow">
+      <q-input v-model="filters.search" placeholder="Vyhledávání..." v-bind="commonProps" clearable>
+        <template #prepend>
+          <q-icon name="search"/>
+        </template>
+      </q-input>
+    </div>
+    <div class="flex items-center">
+      <slot name="append" class="full-height"/>
+    </div>
+  </div>
 </template>
diff --git a/src/components/LoadMoreList.vue b/src/components/LoadMoreList.vue
deleted file mode 100644
index 63a9eee..0000000
--- a/src/components/LoadMoreList.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup>
-const props = defineProps({
-  totalItemsCount: {
-    type: Number,
-    required: true
-  },
-  itemsLength: {
-    type: Number,
-    required: true,
-  },
-  itemsPerPage: {
-    type: Number,
-    required: false,
-    default: 5,
-  },
-  isQueryRunning: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-})
-
-
-const emits = defineEmits(["load-more"]);
-const loadMore = () => {
-  emits("load-more", props.itemsPerPage);
-}
-</script>
-
-<template>
-  <div>
-    <slot name="items"/>
-    <slot name="skeleton" v-if="isQueryRunning"/>
-
-    <div class="text-center q-my-md">
-      <q-btn color="primary" :loading="isQueryRunning" rounded size="lg" icon="expand_more" @click="loadMore()" v-if="totalItemsCount > itemsLength">
-        <slot name="loadMoreText"/>
-      </q-btn>
-    </div>
-  </div>
-</template>
diff --git a/src/components/PrimaryAction.vue b/src/components/PrimaryAction.vue
new file mode 100644
index 0000000..738cabd
--- /dev/null
+++ b/src/components/PrimaryAction.vue
@@ -0,0 +1,46 @@
+<script setup>
+import {computed} from "vue";
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true
+  },
+  routerLink: {
+    type: Object,
+    required: true
+  }
+})
+
+const config = computed(() => {
+  if (props.mode === "add") {
+    return {icon: "add", label: "Přidat"};
+  } else if (props.mode === "edit") {
+    return {icon: "edit", label: "Upravit"};
+  }
+
+  return {icon: "unknown", label: `Neznámý typ ${props.mode}`}
+})
+</script>
+
+<template>
+  <div>
+    <q-toolbar class="justify-end q-pr-none" v-if="$q.screen.gt.sm">
+      <q-btn color="primary" size="lg" :icon="config.icon" :to="props.routerLink">{{ config.label }}</q-btn>
+    </q-toolbar>
+
+    <q-page-sticky
+      location="bottom"
+      :offset="[30, 30]"
+      v-else
+    >
+      <q-fab
+        :icon="config.icon"
+        color="primary"
+        :label="config.label"
+        @click="$router.push(props.routerLink)"
+      />
+    </q-page-sticky>
+    </div>
+</template>
+
diff --git a/src/components/aircrafts/AircraftsList.vue b/src/components/aircrafts/AircraftsList.vue
index 13e55ad..2d17393 100644
--- a/src/components/aircrafts/AircraftsList.vue
+++ b/src/components/aircrafts/AircraftsList.vue
@@ -1,68 +1,53 @@
 <script setup>
-import LoadMoreList from "components/LoadMoreList.vue";
-import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
-import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import {useInfiniteScroll} from "src/composables/pagination";
 
 const props = defineProps({
   items: {
     type: Array,
     required: true
   },
-  totalItemsCount: {
-    type: Number,
-    required: true
-  },
-  itemsPerPage: {
-    type: Number,
-    required: false,
-    default: 5,
-  },
-  isQueryRunning: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+  ...useInfiniteScroll().propsDef
 });
+
+const emits = defineEmits([...useInfiniteScroll().emitsDef])
+const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
 </script>
 
 <template>
-  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
-    <template #items>
-      <q-list bordered separator>
-        <q-item
-          clickable
-          v-ripple
-          :to="{name: 'aircraftDetail', params: {id: aircraft.id }}"
-          v-for="aircraft of props.items" :key="aircraft"
-        >
-          <q-item-section avatar>
-            <q-avatar v-if="aircraft.titlePhoto">
-              <img :src="aircraft.titlePhoto.thumbnailUrl" alt=""/>
-            </q-avatar>
-            <q-avatar color="teal" text-color="white" icon="flight" v-else/>
-          </q-item-section>
-          <q-item-section>
-            <q-item-label label>
-              {{ aircraft.callSign }}
-            </q-item-label>
-            <q-item-label caption>
-              {{ aircraft.model }}
-              <template v-if="aircraft.manufacturer">
-                ({{ aircraft.manufacturer }})
-              </template>
-            </q-item-label>
-            <q-item-label caption v-if="aircraft.organization">
-              Provozovatel: {{ aircraft.organization.name }}
-            </q-item-label>
-          </q-item-section>
-        </q-item>
-      </q-list>
-    </template>
-    <template #skeleton>
-      <BasicListSkeleton :items="itemsPerPage"/>
-    </template>
-    <template #loadMoreText>
-      Další
-    </template>
-  </LoadMoreList>
+  <q-infinite-scroll
+    :disable="!hasMoreData"
+    @load="emitLoadMore"
+    :offset="250"
+  >
+    <q-list bordered separator>
+      <q-item
+        clickable
+        v-ripple
+        :to="{name: 'aircraftDetail', params: {id: aircraft.id }}"
+        v-for="aircraft of props.items" :key="aircraft"
+      >
+        <q-item-section avatar>
+          <q-avatar v-if="aircraft.titlePhoto">
+            <img :src="aircraft.titlePhoto.thumbnailUrl" alt=""/>
+          </q-avatar>
+          <q-avatar color="teal" text-color="white" icon="flight" v-else/>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label label>
+            {{ aircraft.callSign }}
+          </q-item-label>
+          <q-item-label caption>
+            {{ aircraft.model }}
+            <template v-if="aircraft.manufacturer">
+              ({{ aircraft.manufacturer }})
+            </template>
+          </q-item-label>
+          <q-item-label caption v-if="aircraft.organization">
+            Provozovatel: {{ aircraft.organization.name }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-infinite-scroll>
+
 </template>
diff --git a/src/components/flightPlans/FlightPlansList.vue b/src/components/flightPlans/FlightPlansList.vue
index b1a59f1..456a440 100644
--- a/src/components/flightPlans/FlightPlansList.vue
+++ b/src/components/flightPlans/FlightPlansList.vue
@@ -1,36 +1,48 @@
 <script setup>
 import {formatDatetime} from "src/composables/datetimeUtils";
+import {useInfiniteScroll} from "src/composables/pagination";
 
 const props = defineProps({
   items: {
     type: Array,
     required: true
-  }
-})
+  },
+
+  ...useInfiniteScroll().propsDef
+});
+
+const emits = defineEmits([...useInfiniteScroll().emitsDef])
+const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
 
 </script>
 
 <template>
-  <q-list bordered separator>
-    <q-item
-      clickable
-      :to="{name: 'editFlightPlan', params: {id: flightPlan.id }}"
-      v-ripple
-      v-for="flightPlan of items" :key="flightPlan">
-      <q-item-section avatar>
-        <q-avatar icon="flight" color="primary" text-color="white"/>
-      </q-item-section>
-      <q-item-section>
-        <q-item-label>
-          {{ flightPlan.name || "Nepojmenovaný plán" }}
-        </q-item-label>
-        <q-item-label caption v-if="flightPlan.plannedTakeoffDatetime">
-          {{ formatDatetime(flightPlan.plannedTakeoffDatetime) }}
-        </q-item-label>
-        <q-item-label caption v-if="flightPlan.aircraft">
-          {{ flightPlan.aircraft.callSign }}
-        </q-item-label>
-      </q-item-section>
-    </q-item>
-  </q-list>
+  <q-infinite-scroll
+    :disable="!hasMoreData"
+    @load="emitLoadMore"
+    :offset="250"
+  >
+    <q-list bordered separator>
+      <q-item
+        clickable
+        :to="{name: 'editFlightPlan', params: {id: flightPlan.id }}"
+        v-ripple
+        v-for="flightPlan of items" :key="flightPlan">
+        <q-item-section avatar>
+          <q-avatar icon="flight" color="primary" text-color="white"/>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ flightPlan.name || "Nepojmenovaný plán" }}
+          </q-item-label>
+          <q-item-label caption v-if="flightPlan.plannedTakeoffDatetime">
+            {{ formatDatetime(flightPlan.plannedTakeoffDatetime) }}
+          </q-item-label>
+          <q-item-label caption v-if="flightPlan.aircraft">
+            {{ flightPlan.aircraft.callSign }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-infinite-scroll>
 </template>
diff --git a/src/components/flights/FlightsList.vue b/src/components/flights/FlightsList.vue
index 7917684..4eb03c5 100644
--- a/src/components/flights/FlightsList.vue
+++ b/src/components/flights/FlightsList.vue
@@ -2,10 +2,7 @@
 import {minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {flightName} from "src/composables/flight";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
-import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
-import {computed} from "vue";
-import LoadMoreList from "components/LoadMoreList.vue";
-import {pluralize} from "../../composables/utils";
+import {useInfiniteScroll} from "src/composables/pagination";
 
 const props = defineProps({
   items: {
@@ -16,96 +13,82 @@ const props = defineProps({
     type: Boolean,
     required: true
   },
-  totalItemsCount: {
-    type: Number,
-    required: true
-  },
-  itemsPerPage: {
-    type: Number,
-    required: false,
-    default: 5,
-  },
-  isQueryRunning: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+  ...useInfiniteScroll().propsDef
 });
 
+const emits = defineEmits([...useInfiniteScroll().emitsDef])
+const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
+
 const routeDetail = (flight) => {
   if (props.public)
     return {name: "publicFlightDetail", params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}
   else
     return {name: "flightDetail", params: {id: flight.id}}
 };
-const loadMoreCount = computed(() => {
-  return Math.min(props.itemsPerPage, props.totalItemsCount - props.items.length);
-});
-
 </script>
 
 <template>
-  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
-    <template #items>
-      <q-list bordered separator>
-        <q-item
-          v-for="flight of items" :key="flight"
-          ripple
-          clickable
-          :to="routeDetail(flight)"
-        >
-          <q-item-section avatar>
-            <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
-            <q-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>
-          </q-item-section>
-          <q-item-section>
-            <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
+  <q-infinite-scroll
+    :disable="!hasMoreData"
+    @load="emitLoadMore"
+    :offset="250"
+  >
+    <q-list bordered separator>
+      <q-item
+        v-for="flight of items" :key="flight"
+        ripple
+        clickable
+        :to="routeDetail(flight)"
+      >
+        <q-item-section avatar>
+          <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
+          <q-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>
+        </q-item-section>
+        <q-item-section>
+          <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
 
-            <div class="text-secondary" v-if="props.public">
-              <q-icon name="support_agent"/>
-              @{{ flight.pilot.publicUsername }}
-            </div>
+          <div class="text-secondary" v-if="props.public">
+            <q-icon name="support_agent"/>
+            @{{ flight.pilot.publicUsername }}
+          </div>
 
-            <div class="text-secondary" v-if="flight.copilots">
-              <q-icon name="person"/>
-              {{ flight.pilot.name }}
-              {{ flight.copilots }}
-            </div>
+          <div class="text-secondary" v-if="flight.copilots">
+            <q-icon name="person"/>
+            {{ flight.pilot.name }}
+            {{ flight.copilots }}
+          </div>
 
-            <div class="text-secondary">
-              <q-icon name="schedule"/>
-              {{ minutesToHumanReadable(flight.durationMinCalculated) }}
-            </div>
-            <div class="text-secondary">
-              <q-icon name="flight"/>
-              {{ flight.aircraft.callSign }}
-            </div>
+          <div class="text-secondary">
+            <q-icon name="schedule"/>
+            {{ minutesToHumanReadable(flight.durationMinCalculated) }}
+          </div>
+          <div class="text-secondary">
+            <q-icon name="flight"/>
+            {{ flight.aircraft.callSign }}
+          </div>
 
-            <div class="text-secondary" v-if="flight.event">
-              <q-icon name="event"/>
-              {{ flight.event.name }}
-            </div>
-          </q-item-section>
+          <div class="text-secondary" v-if="flight.event">
+            <q-icon name="event"/>
+            {{ flight.event.name }}
+          </div>
+        </q-item-section>
 
-          <q-item-section side top v-if="!props.public">
-            <!-- Zobraz jen v adminu -->
-            <q-icon name="visibility" v-if="flight.isPublic"/>
+        <q-item-section side top v-if="!props.public">
+          <!-- Zobraz jen v adminu -->
+          <q-icon name="visibility" v-if="flight.isPublic"/>
 
-            <q-icon name="warning" color="orange" v-if="flight.isPublic && flight.urlSlug === ''">
-              <q-tooltip>
-                Let je sice publikovaný, nemá ale nastavenou URL adresu!
-              </q-tooltip>
-            </q-icon>
-          </q-item-section>
-        </q-item>
-      </q-list>
+          <q-icon name="warning" color="orange" v-if="flight.isPublic && flight.urlSlug === ''">
+            <q-tooltip>
+              Let je sice publikovaný, nemá ale nastavenou URL adresu!
+            </q-tooltip>
+          </q-icon>
+        </q-item-section>
+      </q-item>
+    </q-list>
+    <template v-slot:loading>
+      <div class="row justify-center q-my-md">
+        <q-spinner-dots color="primary" size="40px"/>
+      </div>
     </template>
-    <template #skeleton>
-      <FlightsListSkeleton :items="itemsPerPage"/>
-    </template>
-    <template #loadMoreText>
-      Načíst {{ pluralize(loadMoreCount, 'jeden let', `další ${loadMoreCount} lety`, `dalších ${loadMoreCount} letů`) }}
-    </template>
-  </LoadMoreList>
-
+  </q-infinite-scroll>
 </template>
diff --git a/src/components/poi/POIList.vue b/src/components/poi/POIList.vue
index 9a75ee8..abca19b 100644
--- a/src/components/poi/POIList.vue
+++ b/src/components/poi/POIList.vue
@@ -1,6 +1,5 @@
 <script setup>
-import LoadMoreList from "components/LoadMoreList.vue";
-import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import {useInfiniteScroll} from "src/composables/pagination";
 
 const props = defineProps({
   items: {
@@ -11,20 +10,7 @@ const props = defineProps({
     type: Boolean,
     required: true
   },
-  totalItemsCount: {
-    type: Number,
-    required: true
-  },
-  itemsPerPage: {
-    type: Number,
-    required: false,
-    default: 5,
-  },
-  isQueryRunning: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+  ...useInfiniteScroll().propsDef,
 });
 
 const getRoute = (item) => {
@@ -33,35 +19,35 @@ const getRoute = (item) => {
   else
     return {name: "poiDetail", params: {id: item.id}}
 };
+
+const emits = defineEmits(useInfiniteScroll().emitsDef)
+const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
+
 </script>
 <template>
-  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
-    <template #items>
-      <q-list bordered separator>
-        <q-item clickable v-for="poi of items" :key="poi" :to="getRoute(poi)">
-          <q-item-section avatar>
-            <q-avatar v-if="poi.titlePhoto">
-              <img :src="poi.titlePhoto.thumbnailUrl" alt=""/>
-            </q-avatar>
-            <q-avatar v-else :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
-          </q-item-section>
-          <q-item-section>
-            {{ poi.name }}
-            <div class="text-secondary" v-if="poi.type">
-              {{ poi.type.name }}
-            </div>
-          </q-item-section>
-          <q-item-section side top v-if="!props.public && poi.isPublic">
-            <q-icon name="visibility"></q-icon>
-          </q-item-section>
-        </q-item>
-      </q-list>
-    </template>
-    <template #skeleton>
-      <BasicListSkeleton :items="itemsPerPage"/>
-    </template>
-    <template #loadMoreText>
-      Další
-    </template>
-  </LoadMoreList>
+  <q-infinite-scroll
+    :disable="!hasMoreData"
+    @load="emitLoadMore"
+    :offset="250"
+  >
+    <q-list bordered separator>
+      <q-item clickable v-for="poi of items" :key="poi" :to="getRoute(poi)">
+        <q-item-section avatar>
+          <q-avatar v-if="poi.titlePhoto">
+            <img :src="poi.titlePhoto.thumbnailUrl" alt=""/>
+          </q-avatar>
+          <q-avatar v-else :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
+        </q-item-section>
+        <q-item-section>
+          {{ poi.name }}
+          <div class="text-secondary" v-if="poi.type">
+            {{ poi.type.name }}
+          </div>
+        </q-item-section>
+        <q-item-section side top v-if="!props.public && poi.isPublic">
+          <q-icon name="visibility"></q-icon>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-infinite-scroll>
 </template>
diff --git a/src/composables/pagination.js b/src/composables/pagination.js
index 2d38f02..5386ed9 100644
--- a/src/composables/pagination.js
+++ b/src/composables/pagination.js
@@ -1,4 +1,4 @@
-import {ref} from "vue";
+import {computed, ref} from "vue";
 
 
 export const usePagination = ({fetchFunction, itemsPerPage = 10}) => {
@@ -9,19 +9,71 @@ export const usePagination = ({fetchFunction, itemsPerPage = 10}) => {
   const paginationLimit = ref(itemsPerPage);
   const paginationOffset = ref(0);
   const filters = ref({});
+  const hasMoreData = ref(true)
 
-  const loadPage = (appendItems) => {
+  const loadFirstPage = () => {
+    paginationOffset.value = 0
     return fetchFunction({
       ...filters.value,
       limit: paginationLimit.value,
-      offset: paginationOffset.value,
-      appendItems
-    }).then(() => {
+      offset: 0,
+      appendItems: false
+    }).then((data) => {
+      console.log("first page", data, data.length, paginationLimit.value)
       paginationOffset.value += paginationLimit.value;
+      hasMoreData.value = data.length === paginationLimit.value;
     })
   }
 
+  const loadPage = (index, done) => {
+    return fetchFunction({
+      ...filters.value,
+      appendItems: true,
+      limit: paginationLimit.value,
+      offset: paginationOffset.value,
+    }).then((data) => {
+            console.log("load page", data, data.length, paginationOffset.value, paginationLimit.value)
+
+      paginationOffset.value += paginationLimit.value;
+      hasMoreData.value = data.length === paginationLimit.value;
+      if (done) done()
+    })
+  }
+
+  const handleFiltersChanged = (newFilters) => {
+    filters.value = newFilters;
+    loadFirstPage()
+  }
+
   return {
-    paginationOffset, paginationLimit, filters, loadPage
+    paginationOffset, paginationLimit, handleFiltersChanged, filters, loadPage, loadFirstPage, hasMoreData
   }
 }
+
+export const useLoading = (promiseGetter) => {
+  const loading = ref(false)
+  const load = () => {
+    loading.value = true
+    return promiseGetter().finally(() => loading.value = false)
+  }
+
+  return {loading, load}
+}
+
+
+export const useInfiniteScroll = (emits, props) => {
+  const emitsDef = ["load-more"]
+  const propsDef = {
+    hasMoreData: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  }
+
+  const hasMoreData = computed(() => props.hasMoreData)
+  const emitLoadMore = (index, done) => emits("load-more", {index, done});
+
+  return {emitsDef, propsDef, hasMoreData, emitLoadMore}
+}
+
diff --git a/src/graphql/fragments/flight.js b/src/graphql/fragments/flight.js
index 766f43b..21c3fe7 100644
--- a/src/graphql/fragments/flight.js
+++ b/src/graphql/fragments/flight.js
@@ -30,7 +30,6 @@ fragment flightFullInfo on Flight {
   durationMinCalculated
   isPublic
   flightPlanId
-
   socialImageUrl
   titlePhoto {
     thumbnailUrl
diff --git a/src/graphql/queries/aircrafts.js b/src/graphql/queries/aircrafts.js
index 73c1d23..a501d6b 100644
--- a/src/graphql/queries/aircrafts.js
+++ b/src/graphql/queries/aircrafts.js
@@ -2,19 +2,17 @@ import gql from "graphql-tag";
 import {FRAGMENT_AIRCRAFT_FULL_INFO, FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO, FRAGMENT_AIRCRAFT_LIST_INFO} from "src/graphql/fragments/aircraft";
 
 export const AIRCRAFTS_LIST = gql`
-query AircraftsList ($limit: Int!, $offset: Int) {
-    aircrafts(limit: $limit, offset: $offset) {
+query AircraftsList ($search: String, $limit: Int!, $offset: Int) {
+    aircrafts(search: $search, limit: $limit, offset: $offset) {
       totalItemsCount
       items {
         ...aircraftListInfo
       }
     }
   }
-
 ${FRAGMENT_AIRCRAFT_LIST_INFO}
 `;
 
-
 export const AIRCRAFT_DETAIL = gql`
 query AircraftDetail($id: Int!) {
   aircraft(id: $id) {
diff --git a/src/graphql/queries/flightPlan.js b/src/graphql/queries/flightPlan.js
index ecea0d0..e85831b 100644
--- a/src/graphql/queries/flightPlan.js
+++ b/src/graphql/queries/flightPlan.js
@@ -2,13 +2,16 @@ import gql from "graphql-tag";
 import {FRAGMENT_FLIGHT_PLAN_FULL_INFO, FRAGMENT_FLIGHT_PLAN_LIST_INFO} from "src/graphql/fragments/flightPlan";
 
 export const FLIGHT_PLANS_LIST = gql`
-query flightPlansList {
-  flightPlans {
-    ...flightPlanListInfo
+  query flightPlansList($search: String, $limit: Int!, $offset: Int) {
+    flightPlans(search: $search, limit: $limit, offset: $offset) {
+      totalItemsCount
+      items {
+        ...flightPlanListInfo
+      }
+    }
   }
-}
 
-${FRAGMENT_FLIGHT_PLAN_LIST_INFO}
+  ${FRAGMENT_FLIGHT_PLAN_LIST_INFO}
 `;
 
 export const FLIGHT_PLAN_DETAIL = gql`
diff --git a/src/graphql/queries/flights.js b/src/graphql/queries/flights.js
index cb04db4..3c4c834 100644
--- a/src/graphql/queries/flights.js
+++ b/src/graphql/queries/flights.js
@@ -5,12 +5,13 @@ import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
 import {FRAGMENT_COPILOT_PUBLIC_INFO} from "src/graphql/fragments/copilot";
 
 export const FLIGHTS_LIST = gql`
-query FlightsList($eventId: Int, $aircraftId: Int, $copilotId: Int, $pointOfInterestId: Int, $limit: Int!, $offset: Int) {
+query FlightsList($eventId: Int, $aircraftId: Int, $copilotId: Int, $pointOfInterestId: Int, $search: String, $limit: Int!, $offset: Int) {
   flights(
     eventId: $eventId,
     aircraftId: $aircraftId,
     copilotId: $copilotId,
     pointOfInterestId: $pointOfInterestId,
+    search: $search,
     limit: $limit,
     offset: $offset
   ) {
diff --git a/src/pages/profile/aircraft/AircraftsPage.vue b/src/pages/profile/aircraft/AircraftsPage.vue
index 413d85b..adefe46 100644
--- a/src/pages/profile/aircraft/AircraftsPage.vue
+++ b/src/pages/profile/aircraft/AircraftsPage.vue
@@ -1,31 +1,34 @@
 <script setup>
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
-import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {storeToRefs} from "pinia";
 import {useAppStore} from "stores/App";
 import {usePagination} from "src/composables/pagination";
-import {onMounted} from "vue";
+import ListFilters from "components/ListFilters.vue";
+import PrimaryAction from "components/PrimaryAction.vue";
 
 useAppStore().setPageTitle("Letadla");
 useAppStore().setBreadcrumbs([])
 
+const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({fetchFunction: useAircraftsStore().fetch});
 const {aircrafts, totalItemsCount, isQueryRunning} = storeToRefs(useAircraftsStore());
-const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useAircraftsStore().fetch});
-onMounted(() => {
-  loadPage(false);
-})
 </script>
 
 <template>
-  <BasicListSkeleton :items="paginationLimit" v-if="isQueryRunning && !totalItemsCount"/>
+  <ListFilters @filters-changed="handleFiltersChanged">
+    <template #append>
+      <PrimaryAction mode="add" :router-link="{name: 'addAircraft'}"/>
+    </template>
+  </ListFilters>
+
+  <BasicListSkeleton :items="5" v-if="isQueryRunning && !totalItemsCount"/>
 
   <BasicInfoBanner
     v-if="!isQueryRunning && totalItemsCount === 0"
     :route-add="{name: 'addAircraft'}"
-    label-add="Vytvořit letadlo"
+    label-add="Přidat letadlo"
   >
     Aktuálně nemáš přidané žádné letadlo. Přidej se k existující organizaci nebo si sem ulož vlastní letadlo.
     <br>
@@ -35,13 +38,8 @@ onMounted(() => {
   <AircraftsList
     v-else
     :items="aircrafts"
-    :total-items-count="totalItemsCount"
-    :is-query-running="isQueryRunning"
-    :items-per-page="paginationLimit"
     :public="true"
-    class="q-mb-xl"
-    @load-more="loadPage(true)"
+    :has-more-data="hasMoreData"
+    @load-more="loadPage($event.index, $event.done)"
   />
-
-  <FAB mode="add" :router-link="{name: 'addAircraft'}"/>
 </template>
diff --git a/src/pages/profile/flight/FlightsPage.vue b/src/pages/profile/flight/FlightsPage.vue
index 4497095..562d06f 100644
--- a/src/pages/profile/flight/FlightsPage.vue
+++ b/src/pages/profile/flight/FlightsPage.vue
@@ -1,29 +1,32 @@
 <script setup>
 import FlightsList from "components/flights/FlightsList.vue";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
-import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
 import {usePagination} from "src/composables/pagination";
-import {onMounted} from "vue";
+import PrimaryAction from "components/PrimaryAction.vue";
+import ListFilters from "components/ListFilters.vue";
 
 useAppStore().setPageTitle("Moje lety");
 useAppStore().setBreadcrumbs([]);
 
-const {loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetch});
-onMounted(() => {
-  loadPage(false);
-});
-const {flights, totalItemsCount, isQueryRunning} = storeToRefs(useFlightsStore());
+const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({fetchFunction: useFlightsStore().fetch});
+const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
+  <ListFilters @filters-changed="handleFiltersChanged">
+    <template #append>
+      <PrimaryAction mode="add" :router-link="{name: 'addFlight'}"/>
+    </template>
+  </ListFilters>
+
   <FlightsListSkeleton v-if="isQueryRunning && flights.length === 0"/>
 
   <BasicInfoBanner
-    v-else-if="!isQueryRunning && totalItemsCount === 0"
+    v-else-if="!isQueryRunning && flights.length === 0"
     :route-add="{name: 'addFlight'}"
     label-add="Přidat let"
   >
@@ -34,11 +37,7 @@ const {flights, totalItemsCount, isQueryRunning} = storeToRefs(useFlightsStore()
     v-else
     :items="flights"
     :public="false"
-    :is-query-running="isQueryRunning"
-    :items-per-page="paginationLimit"
-    :total-items-count="totalItemsCount"
-    @load-more="loadPage(true)"
+    :has-more-data="hasMoreData"
+    @load-more="loadPage($event.index, $event.done)"
   />
-
-  <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>
diff --git a/src/pages/profile/flightPlanner/FlightPlansPage.vue b/src/pages/profile/flightPlanner/FlightPlansPage.vue
index cbaf2ff..1114510 100644
--- a/src/pages/profile/flightPlanner/FlightPlansPage.vue
+++ b/src/pages/profile/flightPlanner/FlightPlansPage.vue
@@ -1,12 +1,13 @@
 <script setup>
 import {useFlightPlansStore} from "stores/FlightPlans";
 import {storeToRefs} from "pinia";
-import {onMounted} from "vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
-import FAB from "components/FAB.vue";
 import FlightPlansList from "components/flightPlans/FlightPlansList.vue";
+import ListFilters from "components/ListFilters.vue";
+import PrimaryAction from "components/PrimaryAction.vue";
+import {usePagination} from "src/composables/pagination";
 
 useAppStore().setPageTitle("Nový plán");
 useAppStore().setBreadcrumbs([
@@ -14,14 +15,20 @@ useAppStore().setBreadcrumbs([
   {label: "Plánované lety"},
 ]);
 
-onMounted(() => {
-  useFlightPlansStore().fetch();
+const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({
+  fetchFunction: useFlightPlansStore().fetch,
+  itemsPerPage: 20
 });
-
 const {flightPlans, isQueryRunning} = storeToRefs(useFlightPlansStore());
 </script>
 
 <template>
+  <ListFilters @filters-changed="handleFiltersChanged">
+    <template #append>
+      <PrimaryAction mode="add" :router-link="{name: 'newFlightPlan'}"/>
+    </template>
+  </ListFilters>
+
   <BasicListSkeleton :items=5 v-if="isQueryRunning || !flightPlans"/>
 
   <BasicInfoBanner
@@ -31,6 +38,10 @@ const {flightPlans, isQueryRunning} = storeToRefs(useFlightPlansStore());
     Aktuálně nemáš žádné naplánované lety.
   </BasicInfoBanner>
 
-  <FlightPlansList :items="flightPlans" v-else/>
-  <FAB :router-link="{name: 'newFlightPlan'}" mode="add"/>
+  <FlightPlansList
+    v-else
+    :items="flightPlans"
+    :has-more-data="hasMoreData"
+    @load-more="loadPage($event.index, $event.done)"
+  />
 </template>
diff --git a/src/pages/profile/poi/PointsOfInterestPage.vue b/src/pages/profile/poi/PointsOfInterestPage.vue
index ff9f835..fead520 100644
--- a/src/pages/profile/poi/PointsOfInterestPage.vue
+++ b/src/pages/profile/poi/PointsOfInterestPage.vue
@@ -9,27 +9,25 @@ import {storeToRefs} from "pinia";
 import {usePagination} from "src/composables/pagination";
 import ListFilters from "components/ListFilters.vue";
 import {onMounted} from "vue";
+import PrimaryAction from "components/PrimaryAction.vue";
 
 useAppStore().setPageTitle("Zajímavá místa");
 useAppStore().setBreadcrumbs([]);
 
-const {filters, loadPage, paginationLimit, paginationOffset} = usePagination({
-  fetchFunction: usePointsOfInterestStore().fetch
+const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({
+  fetchFunction: usePointsOfInterestStore().fetch,
+  itemsPerPage: 20
 });
-onMounted(() => {
-  loadPage(false);
-})
-const handleFiltersChanged = (newFilters) => {
-  paginationOffset.value = 0;
-  filters.value = newFilters;
-  loadPage(false);
-}
 
-const {isQueryRunning, totalItemsCount, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
+const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
-  <ListFilters @filters-changed="handleFiltersChanged"/>
+  <ListFilters @filters-changed="handleFiltersChanged">
+    <template #append>
+      <PrimaryAction mode="add" :router-link="{name: 'addPOI'}"/>
+    </template>
+  </ListFilters>
 
   <BasicListSkeleton :items="10" v-if="isQueryRunning && !pointsOfInterest.length"/>
   <BasicInfoBanner
@@ -45,10 +43,7 @@ const {isQueryRunning, totalItemsCount, pointsOfInterest} = storeToRefs(usePoint
     v-else
     :public="false"
     :items="pointsOfInterest"
-    :total-items-count="totalItemsCount"
-    :is-query-running="isQueryRunning"
-    :items-per-page="paginationLimit"
-    @load-more="loadPage(true)"
+    :has-more-data="hasMoreData"
+    @load-more="loadPage($event.index, $event.done)"
   />
-  <FAB :router-link="{name: 'addPOI'}" mode="add"/>
 </template>
diff --git a/src/pages/public/poi/PointsOfInterestPage.vue b/src/pages/public/poi/PointsOfInterestPage.vue
index 2d9c876..5401c05 100644
--- a/src/pages/public/poi/PointsOfInterestPage.vue
+++ b/src/pages/public/poi/PointsOfInterestPage.vue
@@ -17,21 +17,11 @@ useMeta(() => metaData({
   title: "Místa"
 }))
 
-const {filters, loadPage, paginationOffset, paginationLimit} = usePagination({
+const {loadPage, paginationLimit, hasMoreData, handleFiltersChanged} = usePagination({
   fetchFunction: usePointsOfInterestStore().fetchPublic
 });
 
-onMounted(() => {
-  loadPage(false);
-});
-
-const handleFiltersChanged = (newFilters) => {
-  paginationOffset.value = 0;
-  filters.value = newFilters;
-  loadPage(false);
-}
-
-const {pointsOfInterest, totalItemsCount, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
+const {pointsOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
@@ -43,10 +33,8 @@ const {pointsOfInterest, totalItemsCount, isQueryRunning} = storeToRefs(usePoint
       v-else
       :public="true"
       :items="pointsOfInterest"
-      :total-items-count="totalItemsCount"
-      :is-query-running="isQueryRunning"
-      :items-per-page="paginationLimit"
-      @load-more="loadPage(true)"
+      :has-more-data="hasMoreData"
+      @load-more="loadPage($event.index, $event.done)"
     />
   </div>
 </template>
diff --git a/src/stores/Aircrafts.js b/src/stores/Aircrafts.js
index 7b7979c..960214c 100644
--- a/src/stores/Aircrafts.js
+++ b/src/stores/Aircrafts.js
@@ -29,11 +29,11 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
     return item;
   });
 
-  const fetch = ({appendItems, limit = 100, offset = 0}) => query({
+  const fetch = ({search, appendItems, limit = 100, offset = 0}) => query({
     isQueryRunning,
     query: AIRCRAFTS_LIST,
-    variables: {limit, offset}
-  }).then(data => setItems(data, appendItems, aircrafts, totalItemsCount));
+    variables: {search, limit, offset}
+}).then(data => setItems(data, appendItems, aircrafts, totalItemsCount));
 
   const create = (input) => mutate({
     isMutationRunning,
@@ -41,6 +41,7 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
     variables: {input}
   }).then(item => {
     aircrafts.value.push(item);
+    totalItemsCount.value++;
     return item;
   })
 
diff --git a/src/stores/FlightPlans.js b/src/stores/FlightPlans.js
index b61c185..024cc88 100644
--- a/src/stores/FlightPlans.js
+++ b/src/stores/FlightPlans.js
@@ -1,7 +1,7 @@
 import {defineStore} from 'pinia'
 import {FLIGHT_PLAN_DETAIL, FLIGHT_PLANS_LIST} from "src/graphql/queries/flightPlan";
 import {CREATE_FLIGHT_PLAN, EDIT_FLIGHT_PLAN} from "src/graphql/mutations/flightPlan";
-import {mutate, query, updateInItems} from "stores/helpers";
+import {mutate, query, setItems, updateInItems} from "stores/helpers";
 import {ref} from "vue";
 
 export const useFlightPlansStore = defineStore('FlightPlans', () => {
@@ -9,6 +9,7 @@ export const useFlightPlansStore = defineStore('FlightPlans', () => {
   const flightPlans = ref([]);
   const isMutationRunning = ref(false);
   const isQueryRunning = ref(false);
+  const totalItemsCount = ref(0);
 
   const fetchDetail = (id) => {
     return query({
@@ -26,12 +27,12 @@ export const useFlightPlansStore = defineStore('FlightPlans', () => {
     }).then(item => flightPlan.value = item);
   }
 
-  const fetch = () => {
-    return query({
-      isQueryRunning,
-      query: FLIGHT_PLANS_LIST,
-    }).then(items => flightPlans.value = items);
-  }
+  const fetch = ({search, appendItems, offset, limit}) => query({
+    isQueryRunning,
+    query: FLIGHT_PLANS_LIST,
+    variables: {search, limit, offset}
+  }).then(data => setItems(data, appendItems, flightPlans, totalItemsCount));
+
 
   const create = (input) => {
     return mutate({
@@ -40,6 +41,7 @@ export const useFlightPlansStore = defineStore('FlightPlans', () => {
       variables: {input},
     }).then(item => {
       flightPlans.value.push(item);
+      totalItemsCount.value++;
       return item;
     })
   }
diff --git a/src/stores/Flights.js b/src/stores/Flights.js
index cc15aaf..c7b87f2 100644
--- a/src/stores/Flights.js
+++ b/src/stores/Flights.js
@@ -37,11 +37,13 @@ export const useFlightsStore = defineStore('Flights', () => {
       pointOfInterestId,
       offset,
       limit,
+      search,
       appendItems
     }) => query({
     isQueryRunning,
     query: FLIGHTS_LIST,
     variables: {
+      search,
       eventId,
       aircraftId,
       copilotId,
@@ -63,6 +65,7 @@ export const useFlightsStore = defineStore('Flights', () => {
     variables: {input},
   }).then(item => {
     flights.value.push(item);
+    totalItemsCount.value++;
     return item;
   })
 
diff --git a/src/stores/PointsOfInterest.js b/src/stores/PointsOfInterest.js
index d08eac9..0cc9bda 100644
--- a/src/stores/PointsOfInterest.js
+++ b/src/stores/PointsOfInterest.js
@@ -30,7 +30,7 @@ export const usePointsOfInterestStore = defineStore('PointsOfInterest', () => {
     return item;
   });
 
-  const fetch = ({limit = 100, offset = 0, appendItems, search = undefined}) => query({
+  const fetch = ({limit, offset, appendItems, search = undefined}) => query({
     isQueryRunning,
     query: POI_LIST,
     variables: {limit, offset, search}