Selectors: fix search

packages/client/src/components/panels/AddUsersPanel/index.tsx

@@ -19,7 +19,7 @@ import {
 } from "@docspace/shared/components/selector/Selector.types";
 import { toastr } from "@docspace/shared/components/toast";
 import { Text } from "@docspace/shared/components/text";
-
+import useLoadingWithTimeout from "@docspace/shared/hooks/useLoadingWithTimeout";
 import { getUserRole } from "@docspace/shared/utils/common";
 import Filter from "@docspace/shared/api/people/filter";
 import { getMembersList } from "@docspace/shared/api/people";
@@ -27,6 +27,7 @@ import { ShareAccessRights } from "@docspace/shared/enums";
 import { RowLoader, SearchLoader } from "@docspace/shared/skeletons/selector";
 import { TUser } from "@docspace/shared/api/people/types";
 import { AvatarRole } from "@docspace/shared/components/avatar";
+import { LOADER_TIMEOUT } from "@docspace/shared/constants";
 
 const toListItem = (item: TUser) => {
   const {
@@ -103,6 +104,8 @@ const AddUsersPanel = ({
   ]);
 
   const isFirstLoad = useRef(true);
+  const [isInit, setIsInit] = useState(true);
+  const [isLoading, setIsLoading] = useLoadingWithTimeout<boolean>(0, true);
 
   const accessRight =
     defaultAccess ||
@@ -173,23 +176,29 @@ const AddUsersPanel = ({
   const [total, setTotal] = useState(0);
   const totalRef = useRef(0);
 
-  const onSearch = useCallback((value: string, callback?: Function) => {
-    setSearchValue(() => {
+  const onSearch = useCallback(
+    (value: string, callback?: Function) => {
       isFirstLoad.current = true;
+      setIsLoading(true);
+      setSearchValue(() => {
+        return value;
+      });
+      callback?.();
+    },
+    [setIsLoading],
+  );
 
-      return value;
-    });
-    callback?.();
-  }, []);
-
-  const onClearSearch = useCallback((callback?: Function) => {
-    setSearchValue(() => {
+  const onClearSearch = useCallback(
+    (callback?: Function) => {
       isFirstLoad.current = true;
-
-      return "";
-    });
-    callback?.();
-  }, []);
+      setIsLoading(true);
+      setSearchValue(() => {
+        return "";
+      });
+      callback?.();
+    },
+    [setIsLoading],
+  );
 
   const loadNextPage = useCallback(
     async (startIndex: number) => {
@@ -213,20 +222,26 @@ const AddUsersPanel = ({
 
       const newTotal = response.total - totalDifferent;
 
-      setItemsList((list) => {
-        const newItems = [...list, ...items];
+      if (isFirstLoad.current) {
+        setItemsList([...items]);
+        setHasNextPage(items.length < newTotal);
+      } else {
+        setItemsList((list) => {
+          const newItems = [...list, ...items];
+          setHasNextPage(newItems.length < newTotal);
 
-        setHasNextPage(newItems.length < newTotal);
-        return newItems;
-      });
+          return newItems;
+        });
+      }
       setTotal(newTotal);
       totalRef.current = newTotal;
 
       setIsNextPageLoading(false);
-
+      setIsLoading(false);
+      setIsInit(false);
       isFirstLoad.current = false;
     },
-    [getFilterWithOutDisabledUser, roomId, searchValue],
+    [getFilterWithOutDisabledUser, roomId, searchValue, setIsLoading],
   );
 
   const emptyScreenImage = theme.isBase
@@ -340,16 +355,16 @@ const AddUsersPanel = ({
           isNextPageLoading={isNextPageLoading}
           loadNextPage={loadNextPage}
           totalItems={total}
-          isLoading={isFirstLoad.current}
+          isLoading={isLoading}
           searchLoader={<SearchLoader />}
-          isSearchLoading={isFirstLoad.current}
+          isSearchLoading={isInit}
           rowLoader={
             <RowLoader
               isUser
               count={15}
-              isContainer={isFirstLoad.current}
+              isContainer={isLoading}
               isMultiSelect={isMultiSelect}
-              withAllSelect={!isFirstLoad.current}
+              withAllSelect={!isLoading}
             />
           }
         />

packages/shared/components/selector/sub-components/Body.tsx

@@ -168,7 +168,9 @@ const Body = ({
 
       {(withSearch && isSearchLoading) || isBreadCrumbsLoading ? (
         searchLoader
-      ) : withSearch || (itemsCount > 0 && withSearch) ? (
+      ) : withSearch ||
+        (itemsCount > 0 && withSearch) ||
+        (withSearch && isSearch) ? (
         <Search
           placeholder={searchPlaceholder}
           value={searchValue}
@@ -182,7 +184,7 @@ const Body = ({
         <Scrollbar style={{ height: listHeight }}>{rowLoader}</Scrollbar>
       ) : itemsCount === 0 ? (
         <EmptyScreen
-          withSearch={isSearch && !!searchValue}
+          withSearch={isSearch}
           image={emptyScreenImage}
           header={emptyScreenHeader}
           description={emptyScreenDescription}

packages/shared/selectors/Files/FilesSelector.constants.ts

@@ -6,7 +6,7 @@ export const DEFAULT_BREAD_CRUMB: TBreadCrumb = {
   isRoom: false,
 };
 
-export const SHOW_LOADER_TIMER = 500;
+export const SHOW_LOADER_TIMER = 200;
 export const MIN_LOADER_TIMER = 500;
 
 export const DEFAULT_FILE_EXTS = "file";

packages/shared/selectors/Files/index.tsx

@@ -105,6 +105,7 @@ const FilesSelector = ({
   const [isSelectedParentFolder, setIsSelectedParentFolder] =
     React.useState<boolean>(false);
   const [searchValue, setSearchValue] = React.useState<string>("");
+
   const [isInit, setIsInit] = React.useState(true);
 
   const { getIcon } = useFilesSettings(getIconProp);
@@ -193,6 +194,7 @@ const FilesSelector = ({
     (item: TSelectorItem) => {
       if (item.isFolder) {
         setIsFirstLoad(true);
+
         setItems([]);
         setBreadCrumbs((value) => [
           ...value,
@@ -401,7 +403,8 @@ const FilesSelector = ({
     : {};
 
   const withSearch =
-    !isRoot && items.length ? items.length > 0 : !isRoot && isFirstLoad;
+    !!searchValue ||
+    (!isRoot && items?.length ? items.length > 0 : !isRoot && isFirstLoad);
 
   const searchProps: TSelectorSearch = withSearch
     ? {
@@ -479,7 +482,7 @@ const FilesSelector = ({
       emptyScreenImage={
         theme?.isBase ? EmptyScreenAltSvgUrl : EmptyScreenAltSvgDarkUrl
       }
-      emptyScreenHeader={t("SelectorEmptyScreenHeader")}
+      emptyScreenHeader={t("Common:SelectorEmptyScreenHeader")}
       emptyScreenDescription=""
       searchEmptyScreenImage={
         theme?.isBase
@@ -487,7 +490,7 @@ const FilesSelector = ({
           : EmptyScreenFilterAltDarkSvgUrl
       }
       searchEmptyScreenHeader={t("Common:NotFoundTitle")}
-      searchEmptyScreenDescription={t("EmptyFilterDescriptionText")}
+      searchEmptyScreenDescription={t("Common:EmptyFilterDescriptionText")}
       isLoading={showLoader}
       rowLoader={
         <RowLoader

packages/shared/selectors/People/index.tsx

@@ -172,17 +172,26 @@ const PeopleSelector = ({
         ? response.total - totalDifferent - 1
         : response.total - totalDifferent;
 
-      setItemsList((i) => {
-        const tempItems = [...i, ...data];
-
+      if (isFirstLoad) {
         const newItems = withOutCurrentAuthorizedUser
-          ? removeCurrentUserFromList(tempItems)
-          : moveCurrentUserToTopOfList(tempItems);
+          ? removeCurrentUserFromList(data)
+          : moveCurrentUserToTopOfList(data);
 
         setHasNextPage(newItems.length < newTotal);
+        setItemsList(newItems);
+      } else {
+        setItemsList((i) => {
+          const tempItems = [...i, ...data];
 
-        return newItems;
-      });
+          const newItems = withOutCurrentAuthorizedUser
+            ? removeCurrentUserFromList(tempItems)
+            : moveCurrentUserToTopOfList(tempItems);
+
+          setHasNextPage(newItems.length < newTotal);
+
+          return newItems;
+        });
+      }
 
       setTotal(newTotal);
       totalRef.current = newTotal;
@@ -202,18 +211,16 @@ const PeopleSelector = ({
   );
 
   const onSearch = useCallback((value: string, callback?: Function) => {
+    isFirstLoad.current = true;
     setSearchValue(() => {
-      isFirstLoad.current = true;
-
       return value;
     });
     callback?.();
   }, []);
 
   const onClearSearch = useCallback((callback?: Function) => {
+    isFirstLoad.current = true;
     setSearchValue(() => {
-      isFirstLoad.current = true;
-
       return "";
     });
     callback?.();

packages/shared/selectors/Room/index.tsx

@@ -57,9 +57,8 @@ const RoomSelector = ({
 
   const onSearchAction = React.useCallback(
     (value: string, callback?: Function) => {
+      isFirstLoad.current = true;
       setSearchValue(() => {
-        isFirstLoad.current = true;
-
         return value;
       });
       callback?.();
@@ -68,9 +67,8 @@ const RoomSelector = ({
   );
 
   const onClearSearchAction = React.useCallback((callback?: Function) => {
+    isFirstLoad.current = true;
     setSearchValue(() => {
-      isFirstLoad.current = true;
-
       return "";
     });
     callback?.();
@@ -99,17 +97,19 @@ const RoomSelector = ({
 
       setHasNextPage(count === PAGE_COUNT);
 
-      setItems((prevItems) => {
-        const newItems = [...rooms] as TSelectorItem[];
+      if (isFirstLoad) {
+        setTotal(totalCount);
 
-        if (isFirstLoad) {
-          setTotal(totalCount);
-          isFirstLoad.current = false;
-          return newItems;
-        }
+        setItems([...rooms] as TSelectorItem[]);
+      } else {
+        setItems((prevItems) => {
+          const newItems = [...rooms] as TSelectorItem[];
 
-        return [...prevItems, ...newItems];
-      });
+          return [...prevItems, ...newItems];
+        });
+      }
+
+      isFirstLoad.current = false;
 
       setIsNextPageLoading(false);
     },