matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: use useDeferredValue for search

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-01-29 14:51:17 +01:00
parent ddf88e406e
commit e4f56e1623
2 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/pl-fe/src/features/compose/components/language-dropdown.tsx
View File

@ -1,6 +1,6 @@
import clsx from 'clsx'; import clsx from 'clsx';
import fuzzysort from 'fuzzysort'; 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 { defineMessages, useIntl } from 'react-intl';
import { addComposeLanguage, changeComposeLanguage, changeComposeModifiedLanguage, deleteComposeLanguage } from 'pl-fe/actions/compose'; import { addComposeLanguage, changeComposeLanguage, changeComposeModifiedLanguage, deleteComposeLanguage } from 'pl-fe/actions/compose';
@ -96,8 +96,8 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
setSearchValue(''); setSearchValue('');
}; };
const search = () => { const search = (value: string) => {
if (searchValue === '') { if (value === '') {
return [...languages].sort((a, b) => { return [...languages].sort((a, b) => {
// Push current selection to the top of the list // 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'], keys: ['0', '1'],
limit: 5, limit: 5,
threshold: -10000, threshold: -10000,
@ -143,7 +143,9 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
}, [node.current]); }, [node.current]);
const isSearching = searchValue !== ''; const isSearching = searchValue !== '';
const results = useMemo(search, [searchValue]);
const deferredSearchValue = useDeferredValue(searchValue);
const results = useMemo(() => search(deferredSearchValue), [deferredSearchValue]);
return ( return (
<> <>

7
packages/pl-fe/src/modals/select-bookmark-folder-modal.tsx
View File

@ -1,6 +1,6 @@
import fuzzysort from 'fuzzysort'; import fuzzysort from 'fuzzysort';
import { BookmarkFolder } from 'pl-api'; 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 { FormattedMessage } from 'react-intl';
import { ListItem } from 'pl-fe/components/list'; 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 [selectedFolder, setSelectedFolder] = useState(status.bookmark_folder);
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const deferredSearchTerm = useDeferredValue(searchTerm);
const handleSearchChange: React.ChangeEventHandler<HTMLInputElement> = e => { const handleSearchChange: React.ChangeEventHandler<HTMLInputElement> = e => {
setSearchTerm(e.target.value); setSearchTerm(e.target.value);
@ -73,10 +74,10 @@ const SelectBookmarkFolderModal: React.FC<SelectBookmarkFolderModalProps & BaseM
const filteredFolders = useMemo(() => { const filteredFolders = useMemo(() => {
if (!bookmarkFolders) return []; if (!bookmarkFolders) return [];
const filtered = search(bookmarkFolders, searchTerm); const filtered = search(bookmarkFolders, deferredSearchTerm);
return filtered; return filtered;
}, [bookmarkFolders, searchTerm]); }, [bookmarkFolders, deferredSearchTerm]);
let items; let items;