chore: add flag to sort initial data

Author: linhvovan29546

src/hooks/useSearchResults.ts

@@ -8,9 +8,18 @@ import usePrevious from './usePrevious';
  * It utilizes `useTransition` to allow the searchQuery to change rapidly, while more expensive renders that occur using
  * the result of the filtering and sorting are de-prioritized, allowing them to happen in the background.
  */
-function useSearchResults<TValue extends ListItem>(data: TValue[], filterData: (datum: TValue, searchInput: string) => boolean, sortData: (data: TValue[]) => TValue[] = (d) => d) {
+function useSearchResults<TValue extends ListItem>(
+    data: TValue[],
+    filterData: (datum: TValue, searchInput: string) => boolean,
+    sortData: (data: TValue[]) => TValue[] = (d) => d,
+    /**
+     * Whether to sort data immediately on mount to prevent briefly displaying unsorted data,
+     * since sorting is handled inside startTransition.
+     */
+    shouldSortInitialData?: boolean,
+) {
     const [inputValue, setInputValue] = useState('');
-    const [result, setResult] = useState(data);
+    const [result, setResult] = useState(() => (shouldSortInitialData ? sortData(data) : data));
     const prevData = usePrevious(data);
     const [, startTransition] = useTransition();
     useEffect(() => {

src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx

@@ -52,7 +52,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID, handleAssignCard, isDis
 
     const filterCard = useCallback((card: Card, searchInput: string) => filterCardsByPersonalDetails(card, searchInput, personalDetails), [personalDetails]);
     const sortCards = useCallback((cards: Card[]) => sortCardsByCardholderName(cards, personalDetails), [personalDetails]);
-    const [inputValue, setInputValue, filteredSortedCards] = useSearchResults(allCards, filterCard, sortCards);
+    const [inputValue, setInputValue, filteredSortedCards] = useSearchResults(allCards, filterCard, sortCards, true);
 
     const renderItem = useCallback(
         ({item, index}: ListRenderItemInfo<Card>) => {