only load rom count max fetch limit of skeletons

frontend/src/components/Gallery/Skeleton.vue

@@ -3,18 +3,24 @@ import { views } from "@/utils";
 import { storeToRefs } from "pinia";
 import Skeleton from "@/components/common/Game/Card/Skeleton.vue";
 import storeGalleryView from "@/stores/galleryView";
+import { RECENT_ROMS_LIMIT } from "@/services/api/rom";
+import storeRoms from "@/stores/roms";
 
 const props = withDefaults(
   defineProps<{
     platformId?: number;
+    romCount?: number;
   }>(),
   {
     platformId: undefined,
+    romCount: RECENT_ROMS_LIMIT,
   },
 );
 
 const galleryViewStore = storeGalleryView();
+const romsStore = storeRoms();
 const { currentView } = storeToRefs(galleryViewStore);
+const { fetchLimit } = storeToRefs(romsStore);
 </script>
 
 <template>
@@ -22,7 +28,7 @@ const { currentView } = storeToRefs(galleryViewStore);
     <v-col>
       <v-row v-if="currentView != 2" no-gutters class="mx-1 mt-3 mr-14">
         <v-col
-          v-for="_ in 60"
+          v-for="_ in Math.min(props.romCount, fetchLimit)"
           class="pa-1 align-self-end"
           :cols="views[currentView]['size-cols']"
           :sm="views[currentView]['size-sm']"

frontend/src/components/Home/RecentSkeletonLoader.vue

@@ -2,6 +2,7 @@
 import RSection from "@/components/common/RSection.vue";
 import Skeleton from "@/components/common/Game/Card/Skeleton.vue";
 import { views } from "@/utils";
+import { RECENT_ROMS_LIMIT } from "@/services/api/rom";
 
 defineProps<{ title: string }>();
 </script>
@@ -10,7 +11,7 @@ defineProps<{ title: string }>();
     <template #content>
       <v-row class="flex-nowrap overflow-x-auto pa-1" no-gutters>
         <v-col
-          v-for="_ in 15"
+          v-for="_ in RECENT_ROMS_LIMIT"
           class="align-self-end pa-1"
           :cols="views[0]['size-cols']"
           :sm="views[0]['size-sm']"

frontend/src/services/api/rom.ts

@@ -150,12 +150,15 @@ async function getRoms({
   });
 }
 
+export const RECENT_ROMS_LIMIT = 15;
+export const RECENT_PLAYED_ROMS_LIMIT = 15;
+
 async function getRecentRoms(): Promise<{ data: GetRomsResponse }> {
   return api.get("/roms", {
     params: {
       order_by: "id",
       order_dir: "desc",
-      limit: 15,
+      limit: RECENT_ROMS_LIMIT,
       with_char_index: false,
     },
   });
@@ -166,7 +169,7 @@ async function getRecentPlayedRoms(): Promise<{ data: GetRomsResponse }> {
     params: {
       order_by: "last_played",
       order_dir: "desc",
-      limit: 15,
+      limit: RECENT_PLAYED_ROMS_LIMIT,
       with_char_index: false,
     },
   });

frontend/src/views/Gallery/Collection/BaseCollection.vue

@@ -234,8 +234,10 @@ onBeforeUnmount(() => {
 <template>
   <template v-if="!noCollectionError">
     <gallery-app-bar-collection />
-    <template v-if="fetchingRoms && filteredRoms.length === 0">
-      <skeleton />
+    <template
+      v-if="currentCollection && fetchingRoms && filteredRoms.length === 0"
+    >
+      <skeleton :romCount="currentCollection.rom_count" />
     </template>
     <template v-else>
       <template v-if="filteredRoms.length > 0">

frontend/src/views/Gallery/Platform.vue

@@ -240,7 +240,10 @@ onBeforeUnmount(() => {
     <template
       v-if="currentPlatform && fetchingRoms && filteredRoms.length === 0"
     >
-      <skeleton :platformId="currentPlatform.id" />
+      <skeleton
+        :platformId="currentPlatform.id"
+        :romCount="currentPlatform.rom_count"
+      />
     </template>
     <template v-else>
       <template v-if="filteredRoms.length > 0">