From e4f56e1623df3c2b27f5b5545f625e75516d6345 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Thu, 29 Jan 2026 14:51:17 +0100
Subject: [PATCH] pl-fe: use useDeferredValue for search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../compose/components/language-dropdown.tsx         | 12 +++++++-----
 .../src/modals/select-bookmark-folder-modal.tsx      |  7 ++++---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/pl-fe/src/features/compose/components/language-dropdown.tsx b/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
index d81121c06..6cbf3efbe 100644
--- a/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
+++ b/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import fuzzysort from 'fuzzysort';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { addComposeLanguage, changeComposeLanguage, changeComposeModifiedLanguage, deleteComposeLanguage } from 'pl-fe/actions/compose';
@@ -96,8 +96,8 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
     setSearchValue('');
   };
 
-  const search = () => {
-    if (searchValue === '') {
+  const search = (value: string) => {
+    if (value === '') {
       return [...languages].sort((a, b) => {
         // Push current selection to the top of the list
 
@@ -124,7 +124,7 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
       });
     }
 
-    return fuzzysort.go(searchValue, languages, {
+    return fuzzysort.go(value, languages, {
       keys: ['0', '1'],
       limit: 5,
       threshold: -10000,
@@ -143,7 +143,9 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
   }, [node.current]);
 
   const isSearching = searchValue !== '';
-  const results = useMemo(search, [searchValue]);
+
+  const deferredSearchValue = useDeferredValue(searchValue);
+  const results = useMemo(() => search(deferredSearchValue), [deferredSearchValue]);
 
   return (
     <>
diff --git a/packages/pl-fe/src/modals/select-bookmark-folder-modal.tsx b/packages/pl-fe/src/modals/select-bookmark-folder-modal.tsx
index dd44ce4b2..55f2e9822 100644
--- a/packages/pl-fe/src/modals/select-bookmark-folder-modal.tsx
+++ b/packages/pl-fe/src/modals/select-bookmark-folder-modal.tsx
@@ -1,6 +1,6 @@
 import fuzzysort from 'fuzzysort';
 import { BookmarkFolder } from 'pl-api';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useDeferredValue, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { ListItem } from 'pl-fe/components/list';
@@ -38,6 +38,7 @@ const SelectBookmarkFolderModal: React.FC<SelectBookmarkFolderModalProps & BaseM
 
   const [selectedFolder, setSelectedFolder] = useState(status.bookmark_folder);
   const [searchTerm, setSearchTerm] = useState('');
+  const deferredSearchTerm = useDeferredValue(searchTerm);
 
   const handleSearchChange: React.ChangeEventHandler<HTMLInputElement> = e => {
     setSearchTerm(e.target.value);
@@ -73,10 +74,10 @@ const SelectBookmarkFolderModal: React.FC<SelectBookmarkFolderModalProps & BaseM
   const filteredFolders = useMemo(() => {
     if (!bookmarkFolders) return [];
 
-    const filtered = search(bookmarkFolders, searchTerm);
+    const filtered = search(bookmarkFolders, deferredSearchTerm);
 
     return filtered;
-  }, [bookmarkFolders, searchTerm]);
+  }, [bookmarkFolders, deferredSearchTerm]);
 
   let items;