From eee8cc120f5a3401ea14947ee4e582e8137602af Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 22 Aug 2025 09:56:38 -0400
Subject: [PATCH 1/7] Replace v-progress loaders with skeletons

---
 .../components/Details/BackgroundHeader.vue   | 32 +++++++++----------
 .../common/Game/Dialog/MatchRom.vue           | 31 ++++++++----------
 .../components/common/Navigation/ScanBtn.vue  |  6 ++--
 .../src/components/common/SearchCover.vue     | 23 +++++--------
 frontend/src/components/common/ViewLoader.vue | 19 -----------
 5 files changed, 40 insertions(+), 71 deletions(-)
 delete mode 100644 frontend/src/components/common/ViewLoader.vue

diff --git a/frontend/src/components/Details/BackgroundHeader.vue b/frontend/src/components/Details/BackgroundHeader.vue
index f50164628..e6004792a 100644
--- a/frontend/src/components/Details/BackgroundHeader.vue
+++ b/frontend/src/components/Details/BackgroundHeader.vue
@@ -20,40 +20,40 @@ const unmatchedCoverImage = computed(() =>
 
 <template>
   <v-card
-    id="background-header"
     elevation="0"
     rounded="0"
+    class="w-100"
     :key="currentRom.updated_at"
     v-if="currentRom"
   >
     <v-img
-      id="background-image"
-      :src="currentRom?.path_cover_large || unmatchedCoverImage"
+      class="background-image"
+      :src="currentRom?.path_cover_small || unmatchedCoverImage"
       cover
     >
       <template #error>
         <v-img :src="missingCoverImage" />
       </template>
       <template #placeholder>
-        <div class="d-flex align-center justify-center fill-height">
-          <v-progress-circular
-            :width="2"
-            :size="40"
-            color="primary"
-            indeterminate
-          />
-        </div>
+        <v-skeleton-loader class="background-skeleton" type="image" />
       </template>
     </v-img>
   </v-card>
 </template>
-<style scoped>
-#background-header {
-  width: 100%;
-}
 
-#background-image {
+<style scoped>
+.background-image {
   height: 18rem;
   filter: blur(30px);
 }
+
+.background-skeleton {
+  height: 18rem;
+}
+</style>
+
+<style>
+.background-skeleton .v-skeleton-loader__image {
+  height: 100%;
+}
 </style>
diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index b6a96859a..d30bddd43 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -2,12 +2,13 @@
 import type { SearchRomSchema } from "@/__generated__";
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import RDialog from "@/components/common/RDialog.vue";
-import romApi from "@/services/api/rom";
+import Skeleton from "@/components/common/Game/Card/Skeleton.vue";
 import EmptyManualMatch from "@/components/common/EmptyStates/EmptyManualMatch.vue";
 import storeGalleryView from "@/stores/galleryView";
 import storeHeartbeat from "@/stores/heartbeat";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import storePlatforms from "@/stores/platforms";
+import romApi from "@/services/api/rom";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { computed, inject, onBeforeUnmount, ref } from "vue";
@@ -490,15 +491,10 @@ onBeforeUnmount(() => {
                       cover
                     >
                       <template #placeholder>
-                        <div
-                          class="d-flex align-center justify-center fill-height"
-                        >
-                          <v-progress-circular
-                            color="primary"
-                            :width="2"
-                            indeterminate
-                          />
-                        </div>
+                        <skeleton
+                          :aspectRatio="computedAspectRatio"
+                          type="image"
+                        />
                       </template>
                       <v-row no-gutters class="text-white pa-1">
                         <v-avatar class="mr-1" size="30" rounded="1">
@@ -580,19 +576,18 @@ onBeforeUnmount(() => {
     <template #footer>
       <v-row no-gutters class="text-center">
         <v-col>
-          <v-chip label class="pr-0" size="small"
-            >{{ t("rom.results-found") }}:<v-chip
-              color="primary"
-              class="ml-2 px-2"
-              label
-              >{{ !searching ? matchedRoms.length : ""
-              }}<v-progress-circular
+          <v-chip label class="pr-0" size="small">
+            {{ t("rom.results-found") }}:
+            <v-chip color="primary" class="ml-2 px-2" label>
+              {{ !searching ? matchedRoms.length : "" }}
+              <v-progress-circular
                 v-if="searching"
                 :width="1"
                 :size="10"
                 color="primary"
                 indeterminate
-            /></v-chip>
+              />
+            </v-chip>
           </v-chip>
         </v-col>
       </v-row>
diff --git a/frontend/src/components/common/Navigation/ScanBtn.vue b/frontend/src/components/common/Navigation/ScanBtn.vue
index 68792a70f..d6b82d43d 100644
--- a/frontend/src/components/common/Navigation/ScanBtn.vue
+++ b/frontend/src/components/common/Navigation/ScanBtn.vue
@@ -132,9 +132,9 @@ onBeforeUnmount(() => {
         :size="20"
         indeterminate
       />
-      <v-icon v-else :color="$route.name == 'scan' ? 'primary' : ''"
-        >mdi-magnify-scan</v-icon
-      >
+      <v-icon v-else :color="$route.name == 'scan' ? 'primary' : ''">
+        mdi-magnify-scan
+      </v-icon>
       <v-expand-transition>
         <span
           v-if="withTag"
diff --git a/frontend/src/components/common/SearchCover.vue b/frontend/src/components/common/SearchCover.vue
index cafb2fc39..96916b32a 100644
--- a/frontend/src/components/common/SearchCover.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -2,26 +2,24 @@
 import type { SearchCoverSchema } from "@/__generated__";
 import RDialog from "@/components/common/RDialog.vue";
 import sgdbApi from "@/services/api/sgdb";
+import Skeleton from "@/components/common/Game/Card/Skeleton.vue";
 import storeGalleryView from "@/stores/galleryView";
-import storePlatforms from "@/stores/platforms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, onBeforeUnmount, ref } from "vue";
 import { useDisplay } from "vuetify";
 
 const { lgAndUp } = useDisplay();
+const galleryViewStore = storeGalleryView();
 const show = ref(false);
 const searching = ref(false);
 const searchText = ref("");
 const coverType = ref("all");
 const covers = ref<SearchCoverSchema[]>([]);
 const filteredCovers = ref<SearchCoverSchema[]>();
-const galleryViewStore = storeGalleryView();
 const panels = ref([0]);
+
 const emitter = inject<Emitter<Events>>("emitter");
-const coverAspectRatio = ref(
-  parseFloat(galleryViewStore.defaultAspectRatioCover.toString()),
-);
 emitter?.on("showSearchCoverDialog", ({ term, aspectRatio = null }) => {
   searchText.value = term;
   show.value = true;
@@ -30,6 +28,10 @@ emitter?.on("showSearchCoverDialog", ({ term, aspectRatio = null }) => {
   if (searchText.value) searchCovers();
 });
 
+const coverAspectRatio = ref(
+  parseFloat(galleryViewStore.defaultAspectRatioCover.toString()),
+);
+
 async function searchCovers() {
   covers.value = [];
 
@@ -199,16 +201,7 @@ onBeforeUnmount(() => {
                       ></v-img>
                     </template>
                     <template #placeholder>
-                      <div
-                        class="d-flex align-center justify-center fill-height"
-                      >
-                        <v-progress-circular
-                          :width="2"
-                          :size="40"
-                          color="primary"
-                          indeterminate
-                        />
-                      </div>
+                      <skeleton :aspectRatio="coverAspectRatio" type="image" />
                     </template>
                   </v-img>
                 </v-hover>
diff --git a/frontend/src/components/common/ViewLoader.vue b/frontend/src/components/common/ViewLoader.vue
deleted file mode 100644
index 2af6bbfdd..000000000
--- a/frontend/src/components/common/ViewLoader.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { Events } from "@/types/emitter";
-import type { Emitter } from "mitt";
-import { inject, ref } from "vue";
-
-const show = ref(false);
-const scrim = ref(false);
-const emitter = inject<Emitter<Events>>("emitter");
-emitter?.on("showLoadingDialog", (args) => {
-  show.value = args.loading;
-  scrim.value = args.scrim;
-});
-</script>
-
-<template>
-  <v-dialog :model-value="show" scroll-strategy="none" width="auto" persistent>
-    <v-progress-circular :width="3" :size="70" color="primary" indeterminate />
-  </v-dialog>
-</template>

From 5a4da397a953636825394aa46f9906cbb0975d3a Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 22 Aug 2025 10:28:23 -0400
Subject: [PATCH 2/7] add skeleton loaders to homepage

---
 .../components/Details/RetroAchievements.vue  | 19 ++--
 .../src/components/Home/PlatformsSkeleton.vue | 51 ++++++++++
 ...etonLoader.vue => RecentAddedSkeleton.vue} |  0
 frontend/src/views/Home.vue                   | 96 ++++++++++---------
 4 files changed, 112 insertions(+), 54 deletions(-)
 create mode 100644 frontend/src/components/Home/PlatformsSkeleton.vue
 rename frontend/src/components/Home/{RecentSkeletonLoader.vue => RecentAddedSkeleton.vue} (100%)

diff --git a/frontend/src/components/Details/RetroAchievements.vue b/frontend/src/components/Details/RetroAchievements.vue
index 81b212f6f..be94d12b4 100644
--- a/frontend/src/components/Details/RetroAchievements.vue
+++ b/frontend/src/components/Details/RetroAchievements.vue
@@ -117,27 +117,30 @@ onMounted(() => {
       buffer-opacity="0.6"
       :buffer-value="achievementsPercentage"
       height="32"
-      ><p class="text-shadow">
+    >
+      <p class="text-shadow">
         {{
           Math.max(
             Math.ceil(achievementsPercentage),
             Math.ceil(achievementsPercentageHardcore),
           )
         }}%
-      </p></v-progress-linear
-    >
+      </p>
+    </v-progress-linear>
   </v-list-item>
   <v-chip
     label
     :color="showEarned ? 'primary' : 'gray'"
     @click="toggleShowEarned"
     class="mt-4"
-    ><template #prepend
-      ><v-icon class="mr-2">{{
-        showEarned ? "mdi-checkbox-outline" : "mdi-checkbox-blank-outline"
-      }}</v-icon></template
-    >{{ t("rom.show-earned-only") }}</v-chip
   >
+    <template #prepend>
+      <v-icon class="mr-2">
+        {{ showEarned ? "mdi-checkbox-outline" : "mdi-checkbox-blank-outline" }}
+      </v-icon>
+    </template>
+    {{ t("rom.show-earned-only") }}
+  </v-chip>
   <v-list v-if="rom.merged_ra_metadata?.achievements" class="bg-background">
     <v-list-item
       v-for="achievement in filteredAchievements"
diff --git a/frontend/src/components/Home/PlatformsSkeleton.vue b/frontend/src/components/Home/PlatformsSkeleton.vue
new file mode 100644
index 000000000..add81cd9c
--- /dev/null
+++ b/frontend/src/components/Home/PlatformsSkeleton.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import RSection from "@/components/common/RSection.vue";
+import Skeleton from "@/components/common/Game/Card/Skeleton.vue";
+import { views } from "@/utils";
+import { ref } from "vue";
+import { isNull } from "lodash";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+const storedPlatforms = localStorage.getItem("settings.gridPlatforms");
+const gridPlatforms = ref(
+  isNull(storedPlatforms) ? false : storedPlatforms === "true",
+);
+</script>
+<template>
+  <r-section icon="mdi-shimmer" :title="t('common.platforms')">
+    <template #toolbar-append>
+      <v-skeleton-loader type="button" />
+    </template>
+    <template #content>
+      <v-row
+        :class="{ 'flex-nowrap overflow-x-auto': !gridPlatforms }"
+        class="py-1 overflow-y-hidden"
+        no-gutters
+      >
+        <v-col
+          v-for="_ in 12"
+          class="align-self-end pa-1"
+          :cols="views[0]['size-cols']"
+          :sm="views[0]['size-sm']"
+          :md="views[0]['size-md']"
+          :lg="views[0]['size-lg']"
+          :xl="views[0]['size-xl']"
+        >
+          <v-skeleton-loader
+            class="platform-skeleton"
+            type="heading, image"
+            aspect-ratio="1.2"
+          />
+        </v-col>
+      </v-row>
+    </template>
+  </r-section>
+</template>
+
+<style>
+.platform-skeleton .v-skeleton-loader__heading {
+  margin: 8px;
+  height: 20px;
+}
+</style>
diff --git a/frontend/src/components/Home/RecentSkeletonLoader.vue b/frontend/src/components/Home/RecentAddedSkeleton.vue
similarity index 100%
rename from frontend/src/components/Home/RecentSkeletonLoader.vue
rename to frontend/src/components/Home/RecentAddedSkeleton.vue
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index b95b1c075..60cbeb0e3 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -5,7 +5,8 @@ import { useI18n } from "vue-i18n";
 import Stats from "@/components/Home/Stats.vue";
 import Collections from "@/components/Home/Collections.vue";
 import Platforms from "@/components/Home/Platforms.vue";
-import RecentSkeletonLoader from "@/components/Home/RecentSkeletonLoader.vue";
+import PlatformsSkeleton from "@/components/Home/PlatformsSkeleton.vue";
+import RecentAddedSkeleton from "@/components/Home/RecentAddedSkeleton.vue";
 import RecentAdded from "@/components/Home/RecentAdded.vue";
 import ContinuePlaying from "@/components/Home/ContinuePlaying.vue";
 import EmptyHome from "@/components/Home/EmptyHome.vue";
@@ -16,8 +17,7 @@ import storeRoms from "@/stores/roms";
 
 const { t } = useI18n();
 const romsStore = storeRoms();
-const { recentRoms, continuePlayingRoms: recentPlayedRoms } =
-  storeToRefs(romsStore);
+const { recentRoms, continuePlayingRoms } = storeToRefs(romsStore);
 const platformsStore = storePlatforms();
 const { filledPlatforms } = storeToRefs(platformsStore);
 const collectionsStore = storeCollections();
@@ -45,28 +45,16 @@ const fetchingContinuePlaying = ref(false);
 
 const isEmpty = computed(
   () =>
+    !fetchingRecentAdded.value &&
+    !fetchingContinuePlaying.value &&
     recentRoms.value.length === 0 &&
-    recentPlayedRoms.value.length === 0 &&
+    continuePlayingRoms.value.length === 0 &&
     filledPlatforms.value.length === 0 &&
     filteredCollections.value.length === 0 &&
     filteredVirtualCollections.value.length === 0 &&
     filteredSmartCollections.value.length === 0,
 );
 
-const showRecentSkeleton = computed(
-  () =>
-    showRecentRoms &&
-    fetchingRecentAdded.value &&
-    recentRoms.value.length === 0,
-);
-
-const showContinuePlayingSkeleton = computed(
-  () =>
-    showContinuePlaying &&
-    fetchingContinuePlaying.value &&
-    recentPlayedRoms.value.length === 0,
-);
-
 const fetchRecentRoms = async (): Promise<void> => {
   try {
     fetchingRecentAdded.value = true;
@@ -102,63 +90,79 @@ onMounted(async () => {
 </script>
 
 <template>
-  <template v-if="fetchingRecentAdded || fetchingContinuePlaying">
-    <div class="d-flex align-center justify-center fill-height">
-      <v-progress-circular
-        color="primary"
-        :width="4"
-        size="120"
-        indeterminate
-      />
-    </div>
-  </template>
-  <template v-if="!fetchingRecentAdded && !fetchingContinuePlaying">
-    <template v-if="!isEmpty">
-      <stats v-if="showStats" />
-      <recent-skeleton-loader
-        v-if="showRecentSkeleton"
+  <empty-home v-if="isEmpty" />
+  <template v-else>
+    <stats v-if="showStats" />
+
+    <template v-if="showRecentRoms">
+      <recent-added-skeleton
+        v-if="fetchingRecentAdded && recentRoms.length === 0"
         :title="t('home.recently-added')"
         class="ma-2"
       />
-      <recent-added
-        v-else-if="recentRoms.length > 0 && showRecentRoms"
-        class="ma-2"
-      />
-      <recent-skeleton-loader
-        v-if="showContinuePlayingSkeleton"
+      <recent-added v-else-if="recentRoms.length > 0" class="ma-2" />
+    </template>
+
+    <template v-if="showContinuePlaying">
+      <recent-added-skeleton
+        v-if="fetchingContinuePlaying && continuePlayingRoms.length === 0"
         :title="t('home.continue-playing')"
         class="ma-2"
       />
       <continue-playing
-        v-else-if="recentPlayedRoms.length > 0 && showContinuePlaying"
+        v-else-if="continuePlayingRoms.length > 0"
         class="ma-2"
       />
-      <platforms
-        v-if="filledPlatforms.length > 0 && showPlatforms"
+    </template>
+
+    <template v-if="showPlatforms">
+      <platforms-skeleton v-if="filledPlatforms.length === 0" />
+      <platforms v-else-if="filledPlatforms.length > 0" class="ma-2" />
+    </template>
+
+    <template v-if="showCollections">
+      <recent-added-skeleton
+        v-if="filteredCollections.length === 0"
+        :title="t('common.collections')"
         class="ma-2"
       />
       <collections
-        v-if="filteredCollections.length > 0 && showCollections"
+        v-if="filteredCollections.length > 0"
         :collections="filteredCollections"
         :title="t('common.collections')"
         setting="gridCollections"
         class="ma-2"
       />
+    </template>
+
+    <template v-if="showSmartCollections">
+      <recent-added-skeleton
+        v-if="filteredSmartCollections.length === 0"
+        :title="t('common.smart-collections')"
+        class="ma-2"
+      />
       <collections
-        v-if="filteredSmartCollections.length > 0 && showSmartCollections"
+        v-if="filteredSmartCollections.length > 0"
         :collections="filteredSmartCollections"
         :title="t('common.smart-collections')"
         setting="gridSmartCollections"
         class="ma-2"
       />
+    </template>
+
+    <template v-if="showVirtualCollections">
+      <recent-added-skeleton
+        v-if="filteredVirtualCollections.length === 0"
+        :title="t('common.virtual-collections')"
+        class="ma-2"
+      />
       <collections
-        v-if="filteredVirtualCollections.length > 0 && showVirtualCollections"
+        v-if="filteredVirtualCollections.length > 0"
         :collections="filteredVirtualCollections"
         :title="t('common.virtual-collections')"
         setting="gridVirtualCollections"
         class="ma-2"
       />
     </template>
-    <empty-home v-else />
   </template>
 </template>

From d58d250eae1bcae3850b1d50a905dd0e2b6abf58 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 22 Aug 2025 10:39:14 -0400
Subject: [PATCH 3/7] fetch through stores

---
 .../Settings/UserInterface/Interface.vue      | 10 +---
 .../Collection/Dialog/DeleteCollection.vue    |  2 +-
 frontend/src/layouts/Main.vue                 | 46 ++---------------
 frontend/src/stores/collections.ts            | 50 +++++++++++++++++++
 frontend/src/stores/platforms.ts              | 19 +++++++
 frontend/src/views/Home.vue                   | 21 ++++++--
 6 files changed, 93 insertions(+), 55 deletions(-)

diff --git a/frontend/src/components/Settings/UserInterface/Interface.vue b/frontend/src/components/Settings/UserInterface/Interface.vue
index 63e9b46b7..fd060dd80 100644
--- a/frontend/src/components/Settings/UserInterface/Interface.vue
+++ b/frontend/src/components/Settings/UserInterface/Interface.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import InterfaceOption from "@/components/Settings/UserInterface/InterfaceOption.vue";
 import RSection from "@/components/common/RSection.vue";
-import collectionApi from "@/services/api/collection";
 import storeCollections from "@/stores/collections";
 import { computed, ref } from "vue";
 import { useDisplay } from "vuetify";
@@ -12,7 +11,7 @@ const { t } = useI18n();
 const { smAndDown } = useDisplay();
 const collectionsStore = storeCollections();
 
-// Initializing refs from localStorage
+// Initialize refs from localStorage
 
 // Home
 const storedShowStats = localStorage.getItem("settings.showStats");
@@ -233,12 +232,7 @@ const toggleShowVirtualCollections = (value: boolean) => {
 const setVirtualCollectionType = async (value: string) => {
   virtualCollectionTypeRef.value = value;
   localStorage.setItem("settings.virtualCollectionType", value);
-
-  await collectionApi
-    .getVirtualCollections({ type: value })
-    .then(({ data: virtualCollections }) => {
-      collectionsStore.setVirtualCollections(virtualCollections);
-    });
+  collectionsStore.fetchVirtualCollections(value);
 };
 
 const toggleShowStats = (value: boolean) => {
diff --git a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
index fc8e2dd9b..1890e8fda 100644
--- a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
@@ -29,7 +29,7 @@ async function deleteCollection() {
   show.value = false;
   await collectionApi
     .deleteCollection({ collection: collection.value })
-    .then((response) => {
+    .then(() => {
       emitter?.emit("snackbarShow", {
         msg: "Collection deleted",
         icon: "mdi-check-bold",
diff --git a/frontend/src/layouts/Main.vue b/frontend/src/layouts/Main.vue
index 3bdab6437..ddf3068e5 100644
--- a/frontend/src/layouts/Main.vue
+++ b/frontend/src/layouts/Main.vue
@@ -18,8 +18,6 @@ import SelectStateDialog from "@/components/common/Game/Dialog/Asset/SelectState
 import DeleteSavesDialog from "@/components/common/Game/Dialog/Asset/DeleteSaves.vue";
 import DeleteStatesDialog from "@/components/common/Game/Dialog/Asset/DeleteStates.vue";
 import NoteDialog from "@/components/common/Game/Dialog/NoteDialog.vue";
-import collectionApi from "@/services/api/collection";
-import platformApi from "@/services/api/platform";
 import storeCollections from "@/stores/collections";
 import storeNavigation from "@/stores/navigation";
 import storePlatforms from "@/stores/platforms";
@@ -33,8 +31,7 @@ const platformsStore = storePlatforms();
 const collectionsStore = storeCollections();
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("refreshDrawer", async () => {
-  const { data: platformData } = await platformApi.getPlatforms();
-  platformsStore.set(platformData);
+  platformsStore.fetchPlatforms();
 });
 
 const showVirtualCollections = isNull(
@@ -53,44 +50,11 @@ const virtualCollectionTypeRef = ref(
 );
 
 onBeforeMount(async () => {
-  await platformApi
-    .getPlatforms()
-    .then(({ data: platforms }) => {
-      platformsStore.set(platforms);
-    })
-    .catch((error) => {
-      console.error(error);
-    });
-
-  await collectionApi
-    .getCollections()
-    .then(({ data: collections }) => {
-      collectionsStore.setCollections(collections);
-      collectionsStore.setFavoriteCollection(
-        collections.find(
-          (collection) => collection.name.toLowerCase() === "favourites",
-        ),
-      );
-    })
-    .catch((error) => {
-      console.error(error);
-    });
-
-  await collectionApi
-    .getSmartCollections()
-    .then(({ data: smartCollections }) => {
-      collectionsStore.setSmartCollection(smartCollections);
-    })
-    .catch((error) => {
-      console.error(error);
-    });
-
+  platformsStore.fetchPlatforms();
+  collectionsStore.fetchCollections();
+  collectionsStore.fetchSmartCollections();
   if (showVirtualCollections) {
-    await collectionApi
-      .getVirtualCollections({ type: virtualCollectionTypeRef.value })
-      .then(({ data: virtualCollections }) => {
-        collectionsStore.setVirtualCollections(virtualCollections);
-      });
+    collectionsStore.fetchVirtualCollections(virtualCollectionTypeRef.value);
   }
 
   navigationStore.reset();
diff --git a/frontend/src/stores/collections.ts b/frontend/src/stores/collections.ts
index 6bebd9de3..cc414c91e 100644
--- a/frontend/src/stores/collections.ts
+++ b/frontend/src/stores/collections.ts
@@ -6,6 +6,7 @@ import type {
 import { uniqBy } from "lodash";
 import { defineStore } from "pinia";
 import type { SimpleRom } from "./roms";
+import collectionApi from "@/services/api/collection";
 
 export type Collection = CollectionSchema;
 export type VirtualCollection = VirtualCollectionSchema;
@@ -19,6 +20,9 @@ export default defineStore("collections", {
     smartCollections: [] as SmartCollection[],
     favoriteCollection: {} as Collection | undefined,
     filterText: "" as string,
+    fetchingCollections: false as boolean,
+    fetchingSmartCollections: false as boolean,
+    fetchingVirtualCollections: false as boolean,
   }),
   getters: {
     filteredCollections: ({ allCollections, filterText }) =>
@@ -54,6 +58,52 @@ export default defineStore("collections", {
         },
       );
     },
+    fetchCollections() {
+      if (this.fetchingCollections) return;
+      this.fetchingCollections = true;
+      collectionApi
+        .getCollections()
+        .then(({ data: collections }) => {
+          this.allCollections = collections;
+        })
+        .catch((error) => {
+          console.error(error);
+        })
+        .finally(() => {
+          this.fetchingCollections = false;
+        });
+    },
+    fetchSmartCollections() {
+      if (this.fetchingSmartCollections) return;
+      this.fetchingSmartCollections = true;
+
+      collectionApi
+        .getSmartCollections()
+        .then(({ data: smartCollections }) => {
+          this.smartCollections = smartCollections;
+        })
+        .catch((error) => {
+          console.error(error);
+        })
+        .finally(() => {
+          this.fetchingSmartCollections = false;
+        });
+    },
+    fetchVirtualCollections(type: string) {
+      if (this.fetchingVirtualCollections) return;
+      this.fetchingVirtualCollections = true;
+      collectionApi
+        .getVirtualCollections({ type })
+        .then(({ data: virtualCollections }) => {
+          this.virtualCollections = virtualCollections;
+        })
+        .catch((error) => {
+          console.error(error);
+        })
+        .finally(() => {
+          this.fetchingVirtualCollections = false;
+        });
+    },
     setFavoriteCollection(favoriteCollection: Collection | undefined) {
       this.favoriteCollection = favoriteCollection;
     },
diff --git a/frontend/src/stores/platforms.ts b/frontend/src/stores/platforms.ts
index 257c4b5bc..05fbf91db 100644
--- a/frontend/src/stores/platforms.ts
+++ b/frontend/src/stores/platforms.ts
@@ -1,4 +1,5 @@
 import type { PlatformSchema } from "@/__generated__";
+import platformApi from "@/services/api/platform";
 import { uniqBy } from "lodash";
 import { defineStore } from "pinia";
 
@@ -8,6 +9,7 @@ export default defineStore("platforms", {
   state: () => ({
     allPlatforms: [] as Platform[],
     filterText: "" as string,
+    fetchingPlatforms: false as boolean,
   }),
 
   getters: {
@@ -26,12 +28,29 @@ export default defineStore("platforms", {
         )
         .sort((a, b) => a.display_name.localeCompare(b.display_name)),
   },
+
   actions: {
     _reorder() {
       this.allPlatforms = uniqBy(this.allPlatforms, "id").sort((a, b) => {
         return a.name.localeCompare(b.name);
       });
     },
+    fetchPlatforms() {
+      if (this.fetchingPlatforms) return;
+      this.fetchingPlatforms = true;
+
+      platformApi
+        .getPlatforms()
+        .then(({ data: platforms }) => {
+          this.allPlatforms = platforms;
+        })
+        .catch((error) => {
+          console.error(error);
+        })
+        .finally(() => {
+          this.fetchingPlatforms = false;
+        });
+    },
     set(platforms: Platform[]) {
       this.allPlatforms = platforms;
     },
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 60cbeb0e3..ad7abbabe 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -19,12 +19,15 @@ const { t } = useI18n();
 const romsStore = storeRoms();
 const { recentRoms, continuePlayingRoms } = storeToRefs(romsStore);
 const platformsStore = storePlatforms();
-const { filledPlatforms } = storeToRefs(platformsStore);
+const { filledPlatforms, fetchingPlatforms } = storeToRefs(platformsStore);
 const collectionsStore = storeCollections();
 const {
   filteredCollections,
   filteredVirtualCollections,
   filteredSmartCollections,
+  fetchingCollections,
+  fetchingSmartCollections,
+  fetchingVirtualCollections,
 } = storeToRefs(collectionsStore);
 
 function getSettingValue(key: string, defaultValue: boolean = true): boolean {
@@ -45,6 +48,10 @@ const fetchingContinuePlaying = ref(false);
 
 const isEmpty = computed(
   () =>
+    !fetchingPlatforms.value &&
+    !fetchingCollections.value &&
+    !fetchingSmartCollections.value &&
+    !fetchingVirtualCollections.value &&
     !fetchingRecentAdded.value &&
     !fetchingContinuePlaying.value &&
     recentRoms.value.length === 0 &&
@@ -116,13 +123,15 @@ onMounted(async () => {
     </template>
 
     <template v-if="showPlatforms">
-      <platforms-skeleton v-if="filledPlatforms.length === 0" />
+      <platforms-skeleton
+        v-if="fetchingPlatforms && filledPlatforms.length === 0"
+      />
       <platforms v-else-if="filledPlatforms.length > 0" class="ma-2" />
     </template>
 
     <template v-if="showCollections">
       <recent-added-skeleton
-        v-if="filteredCollections.length === 0"
+        v-if="fetchingCollections && filteredCollections.length === 0"
         :title="t('common.collections')"
         class="ma-2"
       />
@@ -137,7 +146,7 @@ onMounted(async () => {
 
     <template v-if="showSmartCollections">
       <recent-added-skeleton
-        v-if="filteredSmartCollections.length === 0"
+        v-if="fetchingSmartCollections && filteredSmartCollections.length === 0"
         :title="t('common.smart-collections')"
         class="ma-2"
       />
@@ -152,7 +161,9 @@ onMounted(async () => {
 
     <template v-if="showVirtualCollections">
       <recent-added-skeleton
-        v-if="filteredVirtualCollections.length === 0"
+        v-if="
+          fetchingVirtualCollections && filteredVirtualCollections.length === 0
+        "
         :title="t('common.virtual-collections')"
         class="ma-2"
       />

From 17c07c2849a677ad15ad3c93c82ae5bafd49d3cf Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 22 Aug 2025 10:43:41 -0400
Subject: [PATCH 4/7] mainually set main transition

---
 frontend/src/RomM.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/RomM.vue b/frontend/src/RomM.vue
index 6b7037f98..d0ebe9a85 100644
--- a/frontend/src/RomM.vue
+++ b/frontend/src/RomM.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import languageStore from "@/stores/language";
 import { storeToRefs } from "pinia";
-import { ref } from "vue";
+import { nextTick, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { locale } = useI18n();
@@ -14,12 +14,25 @@ const selectedLanguage = ref(
 );
 locale.value = selectedLanguage.value.value;
 storeLanguage.setLanguage(selectedLanguage.value);
+
+onMounted(() => {
+  setTimeout(() => {
+    const main = document.getElementById("main");
+    if (main) main.style.transition = "0.2s cubic-bezier(0.4, 0, 0.2, 1)";
+  }, 500);
+});
 </script>
 
 <template>
   <v-app>
-    <v-main>
+    <v-main id="main">
       <router-view />
     </v-main>
   </v-app>
 </template>
+
+<style scoped>
+#main {
+  transition: none;
+}
+</style>

From baffdfdf76303dfc6322f7570917924bfe85e627 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 22 Aug 2025 11:13:16 -0400
Subject: [PATCH 5/7] correctly promise fetches

---
 frontend/src/RomM.vue                         | 17 +---
 .../src/components/Home/PlatformsSkeleton.vue |  4 +-
 frontend/src/stores/collections.ts            | 92 +++++++++++--------
 frontend/src/stores/platforms.ts              | 30 +++---
 frontend/src/stores/roms.ts                   |  4 +-
 5 files changed, 77 insertions(+), 70 deletions(-)

diff --git a/frontend/src/RomM.vue b/frontend/src/RomM.vue
index d0ebe9a85..6b7037f98 100644
--- a/frontend/src/RomM.vue
+++ b/frontend/src/RomM.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import languageStore from "@/stores/language";
 import { storeToRefs } from "pinia";
-import { nextTick, onMounted, ref } from "vue";
+import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { locale } = useI18n();
@@ -14,25 +14,12 @@ const selectedLanguage = ref(
 );
 locale.value = selectedLanguage.value.value;
 storeLanguage.setLanguage(selectedLanguage.value);
-
-onMounted(() => {
-  setTimeout(() => {
-    const main = document.getElementById("main");
-    if (main) main.style.transition = "0.2s cubic-bezier(0.4, 0, 0.2, 1)";
-  }, 500);
-});
 </script>
 
 <template>
   <v-app>
-    <v-main id="main">
+    <v-main>
       <router-view />
     </v-main>
   </v-app>
 </template>
-
-<style scoped>
-#main {
-  transition: none;
-}
-</style>
diff --git a/frontend/src/components/Home/PlatformsSkeleton.vue b/frontend/src/components/Home/PlatformsSkeleton.vue
index add81cd9c..72d683dc8 100644
--- a/frontend/src/components/Home/PlatformsSkeleton.vue
+++ b/frontend/src/components/Home/PlatformsSkeleton.vue
@@ -11,7 +11,9 @@ const storedPlatforms = localStorage.getItem("settings.gridPlatforms");
 const gridPlatforms = ref(
   isNull(storedPlatforms) ? false : storedPlatforms === "true",
 );
+const PLATFORM_SKELETON_COUNT = 12;
 </script>
+
 <template>
   <r-section icon="mdi-shimmer" :title="t('common.platforms')">
     <template #toolbar-append>
@@ -24,7 +26,7 @@ const gridPlatforms = ref(
         no-gutters
       >
         <v-col
-          v-for="_ in 12"
+          v-for="_ in PLATFORM_SKELETON_COUNT"
           class="align-self-end pa-1"
           :cols="views[0]['size-cols']"
           :sm="views[0]['size-sm']"
diff --git a/frontend/src/stores/collections.ts b/frontend/src/stores/collections.ts
index cc414c91e..68eb73ce1 100644
--- a/frontend/src/stores/collections.ts
+++ b/frontend/src/stores/collections.ts
@@ -58,51 +58,65 @@ export default defineStore("collections", {
         },
       );
     },
-    fetchCollections() {
-      if (this.fetchingCollections) return;
+    fetchCollections(): Promise<Collection[]> {
+      if (this.fetchingCollections) return Promise.resolve([]);
       this.fetchingCollections = true;
-      collectionApi
-        .getCollections()
-        .then(({ data: collections }) => {
-          this.allCollections = collections;
-        })
-        .catch((error) => {
-          console.error(error);
-        })
-        .finally(() => {
-          this.fetchingCollections = false;
-        });
+
+      return new Promise((resolve, reject) => {
+        collectionApi
+          .getCollections()
+          .then(({ data: collections }) => {
+            this.allCollections = collections;
+            resolve(collections);
+          })
+          .catch((error) => {
+            console.error(error);
+            reject(error);
+          })
+          .finally(() => {
+            this.fetchingCollections = false;
+          });
+      });
     },
-    fetchSmartCollections() {
-      if (this.fetchingSmartCollections) return;
+    fetchSmartCollections(): Promise<SmartCollection[]> {
+      if (this.fetchingSmartCollections) return Promise.resolve([]);
       this.fetchingSmartCollections = true;
 
-      collectionApi
-        .getSmartCollections()
-        .then(({ data: smartCollections }) => {
-          this.smartCollections = smartCollections;
-        })
-        .catch((error) => {
-          console.error(error);
-        })
-        .finally(() => {
-          this.fetchingSmartCollections = false;
-        });
+      return new Promise((resolve, reject) => {
+        collectionApi
+          .getSmartCollections()
+          .then(({ data: smartCollections }) => {
+            this.smartCollections = smartCollections;
+            resolve(smartCollections);
+          })
+          .catch((error) => {
+            console.error(error);
+            reject(error);
+          })
+          .finally(() => {
+            this.fetchingSmartCollections = false;
+          });
+      });
     },
-    fetchVirtualCollections(type: string) {
-      if (this.fetchingVirtualCollections) return;
+    fetchVirtualCollections(type: string): Promise<VirtualCollection[]> {
+      if (this.fetchingVirtualCollections) return Promise.resolve([]);
       this.fetchingVirtualCollections = true;
-      collectionApi
-        .getVirtualCollections({ type })
-        .then(({ data: virtualCollections }) => {
-          this.virtualCollections = virtualCollections;
-        })
-        .catch((error) => {
-          console.error(error);
-        })
-        .finally(() => {
-          this.fetchingVirtualCollections = false;
-        });
+
+      return new Promise((resolve, reject) => {
+        collectionApi
+          .getVirtualCollections({ type })
+          .then(({ data: virtualCollections }) => {
+            this.virtualCollections = virtualCollections;
+            resolve(virtualCollections);
+          })
+          .catch((error) => {
+            console.error(error);
+            reject(error);
+          })
+          .finally(() => {
+            this.fetchingVirtualCollections = false;
+          });
+      });
     },
     setFavoriteCollection(favoriteCollection: Collection | undefined) {
       this.favoriteCollection = favoriteCollection;
diff --git a/frontend/src/stores/platforms.ts b/frontend/src/stores/platforms.ts
index 05fbf91db..b9896b35f 100644
--- a/frontend/src/stores/platforms.ts
+++ b/frontend/src/stores/platforms.ts
@@ -35,21 +35,25 @@ export default defineStore("platforms", {
         return a.name.localeCompare(b.name);
       });
     },
-    fetchPlatforms() {
-      if (this.fetchingPlatforms) return;
+    fetchPlatforms(): Promise<Platform[]> {
+      if (this.fetchingPlatforms) return Promise.resolve([]);
       this.fetchingPlatforms = true;
 
-      platformApi
-        .getPlatforms()
-        .then(({ data: platforms }) => {
-          this.allPlatforms = platforms;
-        })
-        .catch((error) => {
-          console.error(error);
-        })
-        .finally(() => {
-          this.fetchingPlatforms = false;
-        });
+      return new Promise((resolve, reject) => {
+        platformApi
+          .getPlatforms()
+          .then(({ data: platforms }) => {
+            this.allPlatforms = platforms;
+            resolve(platforms);
+          })
+          .catch((error) => {
+            console.error(error);
+            reject(error);
+          })
+          .finally(() => {
+            this.fetchingPlatforms = false;
+          });
+      });
     },
     set(platforms: Platform[]) {
       this.allPlatforms = platforms;
diff --git a/frontend/src/stores/roms.ts b/frontend/src/stores/roms.ts
index 661e823a5..06c13cae5 100644
--- a/frontend/src/stores/roms.ts
+++ b/frontend/src/stores/roms.ts
@@ -129,8 +129,8 @@ export default defineStore("roms", {
     }: {
       galleryFilter: GalleryFilterStore;
       concat?: boolean;
-    }) {
-      if (this.fetchingRoms) return Promise.resolve();
+    }): Promise<SimpleRom[]> {
+      if (this.fetchingRoms) return Promise.resolve([]);
       this.fetchingRoms = true;
 
       return new Promise((resolve, reject) => {

From fa58b34635cc2d84a2fcad6033bd979a3a7e72c6 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 22 Aug 2025 11:25:27 -0400
Subject: [PATCH 6/7] move hack to homepage

---
 frontend/src/RomM.vue         |  8 +++++++-
 frontend/src/layouts/Main.vue | 17 +++++++++++------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/RomM.vue b/frontend/src/RomM.vue
index 6b7037f98..c14bdd271 100644
--- a/frontend/src/RomM.vue
+++ b/frontend/src/RomM.vue
@@ -18,8 +18,14 @@ storeLanguage.setLanguage(selectedLanguage.value);
 
 <template>
   <v-app>
-    <v-main>
+    <v-main id="main" class="no-transition">
       <router-view />
     </v-main>
   </v-app>
 </template>
+
+<style scoped>
+#main.no-transition {
+  transition: none;
+}
+</style>
diff --git a/frontend/src/layouts/Main.vue b/frontend/src/layouts/Main.vue
index ddf3068e5..ef7985835 100644
--- a/frontend/src/layouts/Main.vue
+++ b/frontend/src/layouts/Main.vue
@@ -50,14 +50,19 @@ const virtualCollectionTypeRef = ref(
 );
 
 onBeforeMount(async () => {
-  platformsStore.fetchPlatforms();
-  collectionsStore.fetchCollections();
-  collectionsStore.fetchSmartCollections();
-  if (showVirtualCollections) {
-    collectionsStore.fetchVirtualCollections(virtualCollectionTypeRef.value);
-  }
+  await Promise.all([
+    platformsStore.fetchPlatforms(),
+    collectionsStore.fetchCollections(),
+    collectionsStore.fetchSmartCollections(),
+    showVirtualCollections &&
+      collectionsStore.fetchVirtualCollections(virtualCollectionTypeRef.value),
+  ]);
 
   navigationStore.reset();
+
+  // Hack to prevent main page transition on first load
+  const main = document.getElementById("main");
+  if (main) main.classList.remove("no-transition");
 });
 </script>
 

From 38682c49ba3e29f55b763bcf374ed0b8ca6d600e Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 22 Aug 2025 11:53:15 -0400
Subject: [PATCH 7/7] changes from review

---
 frontend/src/layouts/Main.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/layouts/Main.vue b/frontend/src/layouts/Main.vue
index ef7985835..b3840fd7b 100644
--- a/frontend/src/layouts/Main.vue
+++ b/frontend/src/layouts/Main.vue
@@ -54,8 +54,9 @@ onBeforeMount(async () => {
     platformsStore.fetchPlatforms(),
     collectionsStore.fetchCollections(),
     collectionsStore.fetchSmartCollections(),
-    showVirtualCollections &&
-      collectionsStore.fetchVirtualCollections(virtualCollectionTypeRef.value),
+    showVirtualCollections
+      ? collectionsStore.fetchVirtualCollections(virtualCollectionTypeRef.value)
+      : Promise.resolve(),
   ]);
 
   navigationStore.reset();