From 8d1ecec13df7b469b2a1340cc746b2730c19e393 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Thu, 27 Feb 2025 19:10:28 -0500
Subject: [PATCH] improved perf of gallery view

---
 frontend/src/components/Gallery/Skeleton.vue       | 14 ++++++++------
 .../src/components/common/Platform/ListItem.vue    |  2 --
 frontend/src/views/Gallery/Platform.vue            |  5 ++---
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Gallery/Skeleton.vue b/frontend/src/components/Gallery/Skeleton.vue
index 67484f9f6..c346fcee0 100644
--- a/frontend/src/components/Gallery/Skeleton.vue
+++ b/frontend/src/components/Gallery/Skeleton.vue
@@ -11,8 +11,8 @@ const { currentView } = storeToRefs(galleryViewStore);
 <template>
   <v-row no-gutters>
     <v-col>
-      <v-row v-show="currentView != 2" no-gutters class="mx-1 mt-3"
-        ><v-col
+      <v-row v-if="currentView != 2" no-gutters class="mx-1 mt-3">
+        <v-col
           v-for="_ in 60"
           class="pa-1 align-self-end"
           :cols="views[currentView]['size-cols']"
@@ -20,15 +20,17 @@ const { currentView } = storeToRefs(galleryViewStore);
           :md="views[currentView]['size-md']"
           :lg="views[currentView]['size-lg']"
           :xl="views[currentView]['size-xl']"
-          ><v-skeleton-loader type="card" /></v-col
-      ></v-row>
+        >
+          <v-skeleton-loader type="card" />
+        </v-col>
+      </v-row>
 
-      <v-row class="h-100" v-show="currentView == 2" no-gutters>
+      <v-row class="h-100" v-if="currentView == 2" no-gutters>
         <v-col class="h-100 pt-4 pb-2">
           <v-skeleton-loader
             class="mx-2"
             type="table-heading, table-tbody, table-tbody, table-row, table-row, table-row, table-row, table-row"
-          ></v-skeleton-loader>
+          />
         </v-col>
       </v-row>
     </v-col>
diff --git a/frontend/src/components/common/Platform/ListItem.vue b/frontend/src/components/common/Platform/ListItem.vue
index 32dd2080d..f2a2afb30 100644
--- a/frontend/src/components/common/Platform/ListItem.vue
+++ b/frontend/src/components/common/Platform/ListItem.vue
@@ -11,7 +11,6 @@ withDefaults(defineProps<{ platform: Platform; rail?: boolean }>(), {
 
 <template>
   <v-list-item
-    :key="platform.slug"
     :to="{ name: ROUTES.PLATFORM, params: { platform: platform.id } }"
     :value="platform.slug"
     rounded
@@ -20,7 +19,6 @@ withDefaults(defineProps<{ platform: Platform; rail?: boolean }>(), {
   >
     <template #prepend>
       <platform-icon
-        :key="platform.slug"
         :slug="platform.slug"
         :name="platform.name"
         :fs-slug="platform.fs_slug"
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 677721b70..224f5759f 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -313,9 +313,8 @@ onBeforeUnmount(() => {
     </template>
     <template v-else>
       <template v-if="filteredRoms.length > 0">
-        <v-row v-show="currentView != 2" class="pb-2 mx-1 mt-3" no-gutters>
+        <v-row v-if="currentView != 2" class="pb-2 mx-1 mt-3" no-gutters>
           <!-- Gallery cards view -->
-          <!-- v-show instead of v-if to avoid recalculate on view change -->
           <v-col
             v-for="rom in filteredRoms.slice(0, itemsShown)"
             :key="rom.id"
@@ -349,7 +348,7 @@ onBeforeUnmount(() => {
         </v-row>
 
         <!-- Gallery list view -->
-        <v-row class="h-100" v-show="currentView == 2" no-gutters>
+        <v-row class="h-100" v-if="currentView == 2" no-gutters>
           <v-col class="h-100 pt-4 pb-2">
             <game-data-table class="h-100 mx-2" />
           </v-col>