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.
argilla-io · Apr 11, 2022 · b6a8eae · b6a8eae
1 parent e1ebff2
commit b6a8eae
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git 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
@@ -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
@@ -172,6 +172,7 @@ $checkbox-color-dark: $primary-color;
     padding-right: 2em;
     white-space: normal;
     text-transform: none;
+    word-break: break-all;
   }
 }