Delayed workspace member role empty state until debounced list clears

Author: Uzaifm127

src/components/SelectionListWithModal/index.tsx

@@ -20,8 +20,6 @@ import {isEmptyValueObject} from '@src/types/utils/EmptyObject';
 type SelectionListWithModalProps<TItem extends ListItem> = SelectionListProps<TItem> & {
     turnOnSelectionModeOnLongPress?: boolean;
     onTurnOnSelectionMode?: (item: TItem | null) => void;
-    /** Show empty results immediately instead of waiting for the debounced list update. */
-    shouldShowEmptyStateImmediately?: boolean;
     ref?: ForwardedRef<SelectionListHandle<TItem>>;
 };
 
@@ -32,7 +30,6 @@ function SelectionListWithModal<TItem extends ListItem>({
     data,
     isSelected,
     selectedItems: selectedItemsProp,
-    shouldShowEmptyStateImmediately = false,
     style: styleProp,
     ref,
     ...rest
@@ -67,8 +64,7 @@ function SelectionListWithModal<TItem extends ListItem>({
         setDataState(filteredData);
     }, [filteredData, setDataState]);
 
-    const shouldUseDebouncedData = isFiltering && (!shouldShowEmptyStateImmediately || filteredData.length > 0);
-    const displayData = shouldUseDebouncedData ? debouncedData : filteredData;
+    const displayData = isFiltering ? debouncedData : filteredData;
 
     const selectedItems = useMemo(
         () =>

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -24,6 +24,7 @@ import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useConfirmModal from '@hooks/useConfirmModal';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDebouncedAccessibilityAnnouncement from '@hooks/useDebouncedAccessibilityAnnouncement';
+import useDebouncedValue from '@hooks/useDebouncedValue';
 import useFilteredSelection from '@hooks/useFilteredSelection';
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -618,9 +619,12 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers
     const isPendingAddOrDelete =
         isOffline && data?.some((member) => member.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || member.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD);
     const shouldShowSearchBar = data.length > CONST.SEARCH_ITEM_LIMIT;
-    const shouldShowEmptySearchMessage = !!shouldShowSearchBar && inputValue.length !== 0 && filteredData.length === 0;
+    const debouncedFilteredData = useDebouncedValue(filteredData, CONST.TIMING.SEARCH_OPTION_LIST_DEBOUNCE_TIME);
+    const hasNoFilteredMembers = filteredData.length === 0;
+    const hasNoDebouncedFilteredMembers = debouncedFilteredData?.length === 0;
+    const shouldShowEmptySearchMessage = !!shouldShowSearchBar && inputValue.length !== 0 && hasNoFilteredMembers;
     const shouldShowRoleFilter = data.length > 0;
-    const shouldShowRoleFilterEmptyState = shouldShowRoleFilter && !!selectedRoleFilter && inputValue.length === 0 && filteredData.length === 0;
+    const shouldShowRoleFilterEmptyState = shouldShowRoleFilter && !!selectedRoleFilter && inputValue.length === 0 && hasNoFilteredMembers && hasNoDebouncedFilteredMembers;
     const noResultsMessage = translate('common.noResultsFoundMatching', inputValue);
 
     // SearchBar's built-in empty state also controls screen-reader announcements.
@@ -1002,7 +1006,6 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers
                         shouldShowLoadingPlaceholder={isLoading}
                         onDismissError={dismissError}
                         shouldShowListEmptyContent={false}
-                        shouldShowEmptyStateImmediately={shouldShowRoleFilterEmptyState}
                         showScrollIndicator={false}
                         shouldUseUserSkeletonView
                         shouldHeaderBeInsideList