From b6a8eae8a0d4564d0ac30af62ab3ec7ecb8d6842 Mon Sep 17 00:00:00 2001
From: leiyre <leire@recogn.ai>
Date: Mon, 11 Apr 2022 12:41:02 +0200
Subject: [PATCH] fix: improve performance of filter selectors (#1399)

See #1387
This PR improves the performance of filter selectors by adding lazy loading and rendering only when they are visible.
---
 .../components/commons/header/filters/FiltersList.vue     | 8 ++++----
 .../components/commons/header/filters/SelectFilter.vue    | 2 +-
 frontend/components/core/ReCheckbox.vue                   | 1 +
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/components/commons/header/filters/FiltersList.vue b/frontend/components/commons/header/filters/FiltersList.vue
index a03e4927ab..e9c106ce25 100644
--- a/frontend/components/commons/header/filters/FiltersList.vue
+++ b/frontend/components/commons/header/filters/FiltersList.vue
@@ -47,19 +47,19 @@
             )"
             :key="filter.id"
           >
-            <SelectFilter
+            <lazy-select-filter
               v-if="filter.type === 'select'"
               class="filter"
               :filter="filter"
               @apply="onApply"
             />
-            <FilterScore
+            <lazy-filter-score
               v-else-if="filter.type === 'score'"
               class="filter"
               :filter="filter"
               @apply="onApply"
             />
-            <FilterUncoveredByRules
+            <lazy-filter-uncovered-by-rules
               v-else-if="showUncoveredByRulesFilter"
               class="filter"
               :filter="filter"
@@ -76,7 +76,7 @@
             @click.prevent="removeFiltersByGroup(group)"
             >Remove all filters</a
           >
-          <SortList
+          <lazy-sort-list
             v-if="initialVisibleGroup === 'Sort'"
             :sort-options="filterList"
             :sort="dataset.sort"
diff --git a/frontend/components/commons/header/filters/SelectFilter.vue b/frontend/components/commons/header/filters/SelectFilter.vue
index b826577d7c..fcbd2cc934 100644
--- a/frontend/components/commons/header/filters/SelectFilter.vue
+++ b/frontend/components/commons/header/filters/SelectFilter.vue
@@ -48,7 +48,7 @@
           {{ filter.placeholder }}
         </span>
       </span>
-      <div slot="dropdown-content">
+      <div slot="dropdown-content" v-if="visible">
         <input
           v-model="searchText"
           class="filter-options"
diff --git a/frontend/components/core/ReCheckbox.vue b/frontend/components/core/ReCheckbox.vue
index ae3d7255c1..7c28fc52a2 100644
--- a/frontend/components/core/ReCheckbox.vue
+++ b/frontend/components/core/ReCheckbox.vue
@@ -172,6 +172,7 @@ $checkbox-color-dark: $primary-color;
     padding-right: 2em;
     white-space: normal;
     text-transform: none;
+    word-break: break-all;
   }
 }