fix(ui): performance issue for mod/resourcepack list

Voxelum · Jul 30, 2019 · 10e1d44 · 10e1d44
1 parent 62a95cd
commit 10e1d44
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 14 deletions.
diff --git a/src/renderer/windows/main/ModSettingPage.vue b/src/renderer/windows/main/ModSettingPage.vue
@@ -5,7 +5,7 @@
         <span class="headline">{{ $tc('mod.name', 2) }}</span>
       </v-flex>
       <v-flex xs5>
-        <v-text-field v-model="filterSelected" color="primary" class="focus-solo" append-icon="filter_list"
+        <v-text-field v-model="filterText" color="primary" class="focus-solo" append-icon="filter_list"
                       :label="$t('filter')" dark hide-details />
       </v-flex>
       <v-flex d-flex xs6 style="padding-right: 5px;">
@@ -21,7 +21,10 @@
             {{ $t('mod.hint') }}
           </p>
           <div class="list">
-            <mod-card v-for="(mod, index) in mods[1].filter(m => filterMod(filterUnselected, m))" :key="mod.hash" :data="mod.metadata[0]"
+            <mod-card v-for="(mod, index) in unselectedMods" :key="mod.hash" v-observe-visibility="{
+                        callback: (v) => checkBuffer(v, index, false),
+                        once: true,
+                      }" :data="mod.metadata[0]"
                       :is-selected="false" :index="index" :hash="mod.hash" />
           </div>
         </v-card>
@@ -39,7 +42,10 @@
             {{ $t('mod.hint') }}
           </p>
           <div class="list">
-            <mod-card v-for="(mod, index) in mods[0].filter(m => filterMod(filterSelected, m))" :key="mod.hash" :data="mod.metadata[0]"
+            <mod-card v-for="(mod, index) in selectedMods" :key="mod.hash" v-observe-visibility="{
+                        callback: (v) => checkBuffer(v, index, true),
+                        once: true,
+                      }" :data="mod.metadata[0]"
                       :is-selected="true" :index="index" :hash="mod.hash" />
           </div>
         </v-card>
@@ -59,13 +65,27 @@ export default {
     return {
       filterInCompatible: true,
       refreshing: false,
-      filterUnselected: '',
-      filterSelected: '',
+      filterText: '',
+
+      unselectedBuffer: 10,
+      selectedBuffer: 10,
     };
   },
   computed: {
     profile() { return this.$repo.getters.selectedProfile; },
     forge() { return this.profile.forge; },
+    filteredUnselected() {
+      return this.mods[1].filter(m => this.filterMod(this.filterText, m));
+    },
+    filteredSelected() {
+      return this.mods[0].filter(m => this.filterMod(this.filterText, m));
+    },
+    unselectedMods() {
+      return this.filteredUnselected.filter((_, i) => i < this.unselectedBuffer);
+    },
+    selectedMods() {
+      return this.filteredSelected.filter((_, i) => i < this.selectedBuffer);
+    },
     mods() {
       const mods = this.$repo.getters.mods;
       const selectedModsIds = this.forge.mods || [];
@@ -81,6 +101,8 @@ export default {
         if (!selected[`${modMeta.modid}:${modMeta.version}`]) unselectedMods.push(mod);
       }
       const selectedMods = selectedModsIds.map(id => idToMod[id] || { id, missing: true, metadata: [{ name: 'missing' }] });
+      Object.freeze(selectedMods);
+      Object.freeze(unselectedMods);
       return [selectedMods, unselectedMods];
     },
   },
@@ -113,6 +135,16 @@ export default {
       if (!text) return true;
       return mod.name.toLowerCase().indexOf(text.toLowerCase()) !== -1;
     },
+    checkBuffer(visible, index, right) {
+      if (!visible) return;
+      if (right) {
+        if (this.selectedBuffer - index < 5) {
+          this.selectedBuffer += 10;
+        }
+      } else if (this.unselectedBuffer - index < 5) {
+        this.unselectedBuffer += 10;
+      }
+    },
   },
 };
 </script>

diff --git a/src/renderer/windows/main/ResourcePackSettingPage.vue b/src/renderer/windows/main/ResourcePackSettingPage.vue
@@ -5,16 +5,14 @@
         <span class="headline">{{ $tc('resourcepack.name', 2) }}</span>
       </v-flex>
       <v-flex xs5>
-        <v-text-field v-model="filterSelected" color="primary" class="focus-solo" append-icon="filter_list"
+        <v-text-field v-model="filterText" color="primary" class="focus-solo" append-icon="filter_list"
                       :label="$t('filter')" dark hide-details />
       </v-flex>
       <v-flex d-flex xs6 style="padding-right: 5px">
         <v-card dark class="card-list" @drop="onDropLeft" @dragover="onDragOver" @mousewheel="onMouseWheel">
           <v-card-title>
             <span class="text-sm-center" style="width: 100%; font-size: 16px;"> {{ $t('resourcepack.unselected') }} </span> 
           </v-card-title>
-          <!-- <v-divider /> -->
-
           <p v-if="resourcePacks[1].length === 0" class="text-xs-center headline"
              style="position: absolute; top: 120px; right: 0px; user-select: none;">
             <v-icon style="font-size: 50px; display: block;">
@@ -23,8 +21,11 @@
             {{ $t('resourcepack.hint') }}
           </p>
           <div class="list">
-            <resource-pack-card v-for="(pack, index) in resourcePacks[1].filter(r => filterName(r,filterSelected))"
-                                :key="pack.hash" :data="pack.metadata" :is-selected="false" :index="index" />
+            <resource-pack-card v-for="(pack, index) in unselectedPacks" :key="pack.hash" 
+                                v-observe-visibility="{
+                                  callback: (v) => checkBuffer(v, index, true),
+                                  once: true,
+                                }" :data="pack.metadata" :is-selected="false" :index="index" />
           </div>
         </v-card>
       </v-flex>
@@ -33,7 +34,6 @@
           <v-card-title>
             <span class="text-sm-center" style="width: 100%; font-size: 16px;"> {{ $t('resourcepack.selected') }} </span> 
           </v-card-title>
-          <!-- <v-divider /> -->
           <p v-if="resourcePacks[0].length === 0" class="text-xs-center headline"
              style="position: absolute; top: 120px; right: 0px; user-select: none;">
             <v-icon style="font-size: 50px; display: block;">
@@ -42,8 +42,11 @@
             {{ $t('resourcepack.hint') }}
           </p>
           <div class="list">
-            <resource-pack-card v-for="(pack, index) in resourcePacks[0].filter(r => filterName(r, filterSelected))"
-                                :key="pack.hash" :data="pack.metadata" :is-selected="true" :index="index" />
+            <resource-pack-card v-for="(pack, index) in selectedPacks" :key="pack.hash"
+                                v-observe-visibility="{
+                                  callback: (v) => checkBuffer(v, index, true),
+                                  once: true,
+                                }" :data="pack.metadata" :is-selected="true" :index="index" />
           </div>
         </v-card>
       </v-flex>
@@ -60,10 +63,19 @@ export default {
   mixins: [SelectionList],
   data() {
     return {
-      filterSelected: '',
+      filterText: '',
+
+      unselectedBuffer: 10,
+      selectedBuffer: 10,
     };
   },
   computed: {
+    selectedPacks() {
+      return this.resourcePacks[0].filter(m => this.filterName(m, this.filterText)).filter((_, i) => i < this.selectedBuffer);
+    },
+    unselectedPacks() {
+      return this.resourcePacks[1].filter(m => this.filterName(m, this.filterText)).filter((_, i) => i < this.unselectedBuffer);
+    },
     resourcePacks() {
       const packs = this.$repo.getters.resourcepacks;
       const packnames = this.$repo.getters.selectedProfile.settings.resourcePacks || [];
@@ -124,6 +136,16 @@ export default {
       if (!str) return true;
       return r.name.toLowerCase().indexOf(str.toLowerCase()) !== -1;
     },
+    checkBuffer(visible, index, right) {
+      if (!visible) return;
+      if (right) {
+        if (this.selectedBuffer - index < 5) {
+          this.selectedBuffer += 10;
+        }
+      } else if (this.unselectedBuffer - index < 5) {
+        this.unselectedBuffer += 10;
+      }
+    },
   },
 };
 </script>