improved perf of gallery view

rommapp · Feb 28, 2025 · 8d1ecec · 8d1ecec
1 parent 43257cd
commit 8d1ecec
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git a/frontend/src/components/Gallery/Skeleton.vue b/frontend/src/components/Gallery/Skeleton.vue
@@ -11,24 +11,26 @@ 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']"
           :sm="views[currentView]['size-sm']"
           :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
@@ -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
@@ -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>