small performance improvement by caching the computed prop

fixed eslint

there are still some performance issues with larger lists. Need to
investigate whether this is a Vue issue or a fuzzaldrin issue

2 files changed, 10 insertions, 7 deletions

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index d1902557fe8..3e7cf69dbda 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -31,13 +31,16 @@ export default {
         maxResults: MAX_RESULTS,
       });
     },
+    filteredBlobsLength() {
+      return this.filteredBlobs.length;
+    },
     listShowCount() {
-      if (!this.filteredBlobs.length) return 1;
+      if (!this.filteredBlobsLength) return 1;
 
-      return this.filteredBlobs.length > 5 ? 5 : this.filteredBlobs.length;
+      return this.filteredBlobsLength > 5 ? 5 : this.filteredBlobsLength;
     },
     listHeight() {
-      return this.filteredBlobs.length ? 55 : 33;
+      return this.filteredBlobsLength ? 55 : 33;
     },
   },
   watch: {
@@ -62,7 +65,7 @@ export default {
         case 40:
           // DOWN
           e.preventDefault();
-          if (this.focusedIndex < this.filteredBlobs.length - 1) this.focusedIndex += 1;
+          if (this.focusedIndex < this.filteredBlobsLength - 1) this.focusedIndex += 1;
           break;
         default:
           break;
@@ -117,7 +120,7 @@ export default {
           :start="focusedIndex"
           wtag="ul"
         >
-          <template v-if="filteredBlobs.length">
+          <template v-if="filteredBlobsLength">
             <li
               v-for="(file, index) in filteredBlobs"
               :key="file.key"
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index 4003f72f1ac..15ba9f3d21c 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -56,12 +56,12 @@ export default {
     <span class="diff-changed-file-content append-right-8">
       <strong
         class="diff-changed-file-name"
-        v-html="highlightText(this.file.name)"
+        v-html="highlightText(file.name)"
       >
       </strong>
       <span
         class="diff-changed-file-path prepend-top-5"
-        v-html="highlightText(this.file.path)"
+        v-html="highlightText(file.path)"
       >
       </span>
     </span>