Merge remote-tracking branch 'origin/develop' into develop

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 (
     <>

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;