From 6070f2f5c328e6166f763ce33cf183608ecb68ff Mon Sep 17 00:00:00 2001
From: ccbikai <ccbikai@gmail.com>
Date: Sun, 2 Mar 2025 14:33:47 +0800
Subject: [PATCH] feat: add virtual scroll to links dropdown

Enhances dropdown performance by implementing virtual scrolling with VList from virtua/vue library. This optimization improves rendering efficiency for large link lists by only rendering visible items.
---
 components/dashboard/Filters.vue | 36 ++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/components/dashboard/Filters.vue b/components/dashboard/Filters.vue
index 7a84496..91ff269 100644
--- a/components/dashboard/Filters.vue
+++ b/components/dashboard/Filters.vue
@@ -1,7 +1,8 @@
 <script setup>
-import { useUrlSearchParams } from '@vueuse/core'
+import { useUrlSearchParams, watchDebounced } from '@vueuse/core'
 import { safeDestr } from 'destr'
 import { Check, ChevronsUpDown } from 'lucide-vue-next'
+import { VList } from 'virtua/vue'
 
 const emit = defineEmits(['change'])
 
@@ -17,9 +18,9 @@ onMounted(() => {
   getLinks()
 })
 
-watch(selectedLinks, (value) => {
+watchDebounced(selectedLinks, (value) => {
   emit('change', 'slug', value.join(','))
-})
+}, { debounce: 500, maxWait: 1000 })
 
 function restoreFilters() {
   const searchParams = useUrlSearchParams('history')
@@ -57,20 +58,23 @@ onBeforeMount(() => {
         <CommandEmpty>No link found.</CommandEmpty>
         <CommandList>
           <CommandGroup>
-            <CommandItem
-              v-for="link in links"
-              :key="link.slug"
-              :value="link.slug"
-              @select="isOpen = false"
+            <VList
+              v-slot="{ item: link }"
+              :data="links"
+              :style="{ height: '292px' }"
             >
-              <Check
-                :class="cn(
-                  'mr-2 h-4 w-4',
-                  selectedLinks.includes(link.slug) ? 'opacity-100' : 'opacity-0',
-                )"
-              />
-              {{ link.slug }}
-            </CommandItem>
+              <CommandItem
+                :value="link.slug"
+              >
+                <Check
+                  :class="cn(
+                    'mr-2 h-4 w-4',
+                    selectedLinks.includes(link.slug) ? 'opacity-100' : 'opacity-0',
+                  )"
+                />
+                {{ link.slug }}
+              </CommandItem>
+            </VList>
           </CommandGroup>
         </CommandList>
       </Command>