diff --git a/packages/shared/components/selector/Selector.styled.ts b/packages/shared/components/selector/Selector.styled.ts index 244fa9c175..a98ff30cfc 100644 --- a/packages/shared/components/selector/Selector.styled.ts +++ b/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; diff --git a/packages/shared/components/selector/Selector.types.ts b/packages/shared/components/selector/Selector.types.ts index 298c2b7b3a..29bfd0a026 100644 --- a/packages/shared/components/selector/Selector.types.ts +++ b/packages/shared/components/selector/Selector.types.ts @@ -47,7 +47,7 @@ type THeaderBackButton = | { onBackClick?: undefined; withoutBackButton?: undefined; - withoutBorder: undefined; + withoutBorder?: undefined; }; export type TInfoBarData = { diff --git a/packages/shared/selectors/Files/hooks/useLoadersHelper.ts b/packages/shared/selectors/Files/hooks/useLoadersHelper.ts index 19f75c3174..94cc0d4a25 100644 --- a/packages/shared/selectors/Files/hooks/useLoadersHelper.ts +++ b/packages/shared/selectors/Files/hooks/useLoadersHelper.ts @@ -44,6 +44,7 @@ const useLoadersHelper = () => { const [isFirstLoad, setIsFirstLoad] = React.useState(true); const startLoader = React.useRef(new Date()); + const loaderTimeout = React.useRef(null); const breadCrumbsLoaderTimeout = React.useRef(null); const breadCrumbsStartLoader = React.useRef(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]); diff --git a/packages/shared/selectors/Files/index.tsx b/packages/shared/selectors/Files/index.tsx index 1c601c5d96..ddcd246312 100644 --- a/packages/shared/selectors/Files/index.tsx +++ b/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,