Merge pull request #572 from ONLYOFFICE/bugfix/selector-list-loader

Bugfix/selector list loader

packages/shared/components/selector/Selector.styled.ts

@@ -63,7 +63,7 @@ const StyledSelector = styled.div`
   overflow: hidden;
 `;
 
-const StyledHeader = styled.div<{ withoutBorder: boolean }>`
+const StyledHeader = styled.div<{ withoutBorder?: boolean }>`
   width: calc(100% - 32px);
   min-height: 53px;
   height: 53px;

packages/shared/components/selector/Selector.types.ts

@@ -47,7 +47,7 @@ type THeaderBackButton =
   | {
       onBackClick?: undefined;
       withoutBackButton?: undefined;
-      withoutBorder: undefined;
+      withoutBorder?: undefined;
     };
 
 export type TInfoBarData = {

packages/shared/selectors/Files/hooks/useLoadersHelper.ts

@@ -44,6 +44,7 @@ const useLoadersHelper = () => {
   const [isFirstLoad, setIsFirstLoad] = React.useState(true);
 
   const startLoader = React.useRef<Date | null>(new Date());
+  const loaderTimeout = React.useRef<NodeJS.Timeout | null>(null);
 
   const breadCrumbsLoaderTimeout = React.useRef<NodeJS.Timeout | null>(null);
   const breadCrumbsStartLoader = React.useRef<Date | null>(new Date());
@@ -59,9 +60,10 @@ const useLoadersHelper = () => {
 
   const calculateLoader = React.useCallback(() => {
     if (isFirstLoad) {
-      setShowLoader(true);
-
-      startLoader.current = new Date();
+      loaderTimeout.current = setTimeout(() => {
+        startLoader.current = new Date();
+        if (isMount.current) setShowLoader(true);
+      }, SHOW_LOADER_TIMER);
     } else if (startLoader.current) {
       const currentDate = new Date();
 
@@ -80,6 +82,11 @@ const useLoadersHelper = () => {
           setShowLoader(false);
         }
       }, MIN_LOADER_TIMER - ms);
+
+      loaderTimeout.current = null;
+    } else if (loaderTimeout.current) {
+      clearTimeout(loaderTimeout.current);
+      loaderTimeout.current = null;
     }
   }, [isFirstLoad]);
 

packages/shared/selectors/Files/index.tsx

@@ -238,7 +238,7 @@ const FilesSelectorComponent = ({
           setSelectedItemType(undefined);
           getRootData();
         } else {
-          setItems([]);
+          // setItems([]);
 
           setBreadCrumbs((bc) => {
             const idx = bc.findIndex(
@@ -302,7 +302,7 @@ const FilesSelectorComponent = ({
       if (item.isFolder) {
         setIsFirstLoad(true);
 
-        setItems([]);
+        // setItems([]);
         setBreadCrumbs((value) => [
           ...value,
           {
@@ -445,7 +445,14 @@ const FilesSelectorComponent = ({
         selectedFileInfo,
       );
     },
-    [breadCrumbs, selectedFileInfo, selectedItemId, selectedTreeNode, onSubmit],
+    [
+      breadCrumbs,
+      rootFolderType,
+      onSubmit,
+      selectedItemId,
+      selectedTreeNode,
+      selectedFileInfo,
+    ],
   );
 
   React.useEffect(() => {
@@ -499,7 +506,7 @@ const FilesSelectorComponent = ({
     submitButtonLabel,
     submitButtonId,
     disableSubmitButton: getIsDisabled(
-      isFirstLoad,
+      isFirstLoad && showLoader,
       isSelectedParentFolder,
       selectedItemId,
       selectedItemType,