Web:Client:Adding a filter loading skeleton when the EmptyScreen skeleton is shown.
This commit is contained in:
parent
83fdaf0753
commit
6cf7795e98
@ -26,6 +26,7 @@ const EmptyFolderContainer = ({
|
||||
tReady,
|
||||
isLoadedFetchFiles,
|
||||
viewAs,
|
||||
setIsLoadedEmptyPage,
|
||||
}) => {
|
||||
const onBackToParentFolder = () => {
|
||||
setIsLoading(true);
|
||||
@ -35,10 +36,21 @@ const EmptyFolderContainer = ({
|
||||
: fetchFiles(parentId).finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isLoadedFetchFiles && tReady) {
|
||||
setIsLoadedEmptyPage(true);
|
||||
} else {
|
||||
setIsLoadedEmptyPage(false);
|
||||
}
|
||||
}, [isLoadedFetchFiles, tReady]);
|
||||
|
||||
React.useEffect(() => {
|
||||
setIsEmptyPage(true);
|
||||
|
||||
return () => setIsEmptyPage(false);
|
||||
return () => {
|
||||
setIsEmptyPage(false);
|
||||
setIsLoadedEmptyPage(false);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const onInviteUsersClick = () => {
|
||||
@ -161,6 +173,7 @@ export default inject(
|
||||
setIsEmptyPage,
|
||||
isLoadedFetchFiles,
|
||||
viewAs,
|
||||
setIsLoadedEmptyPage,
|
||||
} = filesStore;
|
||||
const {
|
||||
navigationPath,
|
||||
@ -198,6 +211,7 @@ export default inject(
|
||||
folderId,
|
||||
isLoadedFetchFiles,
|
||||
viewAs,
|
||||
setIsLoadedEmptyPage,
|
||||
};
|
||||
}
|
||||
)(withTranslation(["Files", "Translations"])(observer(EmptyFolderContainer)));
|
||||
|
@ -48,6 +48,7 @@ const RootFolderContainer = (props) => {
|
||||
setIsEmptyPage,
|
||||
isVisitor,
|
||||
sectionWidth,
|
||||
setIsLoadedEmptyPage,
|
||||
} = props;
|
||||
const personalDescription = t("EmptyFolderDecription");
|
||||
|
||||
@ -87,8 +88,17 @@ const RootFolderContainer = (props) => {
|
||||
|
||||
return () => {
|
||||
setIsEmptyPage(false);
|
||||
setIsLoadedEmptyPage(false);
|
||||
};
|
||||
}, [isEmptyPage, setIsEmptyPage, rootFolderType]);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isLoading) {
|
||||
setIsLoadedEmptyPage(true);
|
||||
} else {
|
||||
setIsLoadedEmptyPage(false);
|
||||
}
|
||||
}, [isLoading]);
|
||||
|
||||
const onGoToPersonal = () => {
|
||||
const newFilter = filter.clone();
|
||||
@ -313,31 +323,17 @@ const RootFolderContainer = (props) => {
|
||||
const headerText = isPrivacyFolder ? privateRoomHeader : title;
|
||||
const emptyFolderProps = getEmptyFolderProps();
|
||||
|
||||
React.useEffect(() => {
|
||||
let timeout;
|
||||
|
||||
if (isLoading) {
|
||||
setShowLoader(isLoading);
|
||||
} else {
|
||||
timeout = setTimeout(() => setShowLoader(isLoading), 300);
|
||||
}
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
}, [isLoading]);
|
||||
if (isLoading) {
|
||||
return <Loaders.EmptyContainerLoader viewAs={viewAs} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{showLoader ? (
|
||||
<Loaders.EmptyContainerLoader viewAs={viewAs} />
|
||||
) : (
|
||||
<EmptyContainer
|
||||
headerText={headerText}
|
||||
isEmptyPage={isEmptyPage}
|
||||
sectionWidth={sectionWidth}
|
||||
{...emptyFolderProps}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
<EmptyContainer
|
||||
headerText={headerText}
|
||||
isEmptyPage={isEmptyPage}
|
||||
sectionWidth={sectionWidth}
|
||||
{...emptyFolderProps}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -362,6 +358,7 @@ export default inject(
|
||||
setAlreadyFetchingRooms,
|
||||
isEmptyPage,
|
||||
setIsEmptyPage,
|
||||
setIsLoadedEmptyPage,
|
||||
} = filesStore;
|
||||
const { title, rootFolderType } = selectedFolderStore;
|
||||
const { isPrivacyFolder, myFolderId } = treeFoldersStore;
|
||||
@ -387,6 +384,7 @@ export default inject(
|
||||
setAlreadyFetchingRooms,
|
||||
isEmptyPage,
|
||||
setIsEmptyPage,
|
||||
setIsLoadedEmptyPage,
|
||||
};
|
||||
}
|
||||
)(withTranslation(["Files"])(observer(RootFolderContainer)));
|
||||
|
@ -169,8 +169,21 @@ const SectionFilterContent = ({
|
||||
searchTitleOpenLocation,
|
||||
isLoadedLocationFiles,
|
||||
setIsLoadedSearchFiles,
|
||||
isLoadedEmptyPage,
|
||||
isEmptyPage,
|
||||
}) => {
|
||||
const [selectedFilterValues, setSelectedFilterValues] = React.useState(null);
|
||||
const [isLoadedFilter, setIsLoadedFilter] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isEmptyPage) {
|
||||
setIsLoadedFilter(isLoadedEmptyPage);
|
||||
}
|
||||
|
||||
if (!isEmptyPage && !isLoadedEmptyPage) {
|
||||
setIsLoadedFilter(true);
|
||||
}
|
||||
}, [isLoadedEmptyPage, isEmptyPage]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!(searchTitleOpenLocation && isLoadedLocationFiles)) return;
|
||||
@ -1298,6 +1311,10 @@ const SectionFilterContent = ({
|
||||
}
|
||||
};
|
||||
|
||||
if (!isLoadedFilter) {
|
||||
return <Loaders.Filter />;
|
||||
}
|
||||
|
||||
return (
|
||||
<FilterInput
|
||||
t={t}
|
||||
@ -1347,6 +1364,8 @@ export default inject(
|
||||
createThumbnails,
|
||||
setCurrentRoomsFilter,
|
||||
thirdPartyStore,
|
||||
isLoadedEmptyPage,
|
||||
isEmptyPage,
|
||||
} = filesStore;
|
||||
|
||||
const { providers } = thirdPartyStore;
|
||||
@ -1405,6 +1424,9 @@ export default inject(
|
||||
setSearchTitleOpenLocation,
|
||||
isLoadedLocationFiles,
|
||||
setIsLoadedSearchFiles,
|
||||
|
||||
isLoadedEmptyPage,
|
||||
isEmptyPage,
|
||||
};
|
||||
}
|
||||
)(
|
||||
|
@ -492,6 +492,7 @@ class PureHome extends React.Component {
|
||||
frameConfig,
|
||||
withPaging,
|
||||
isEmptyPage,
|
||||
isLoadedEmptyPage,
|
||||
} = this.props;
|
||||
|
||||
if (window.parent && !frameConfig) {
|
||||
@ -538,7 +539,7 @@ class PureHome extends React.Component {
|
||||
</Section.SectionHeader>
|
||||
)}
|
||||
|
||||
{!isEmptyPage && !isErrorRoomNotAvailable && (
|
||||
{!isLoadedEmptyPage && !isErrorRoomNotAvailable && (
|
||||
<Section.SectionFilter>
|
||||
{isFrame ? (
|
||||
showFilter && <SectionFilterContent />
|
||||
@ -548,6 +549,12 @@ class PureHome extends React.Component {
|
||||
</Section.SectionFilter>
|
||||
)}
|
||||
|
||||
{isLoadedEmptyPage && (
|
||||
<Section.SectionFilter>
|
||||
<div style={{ height: "32px" }} />
|
||||
</Section.SectionFilter>
|
||||
)}
|
||||
|
||||
<Section.SectionBody>
|
||||
<Consumer>
|
||||
{(context) => (
|
||||
@ -622,7 +629,7 @@ export default inject(
|
||||
refreshFiles,
|
||||
setViewAs,
|
||||
isEmptyPage,
|
||||
|
||||
isLoadedEmptyPage,
|
||||
disableDrag,
|
||||
isErrorRoomNotAvailable,
|
||||
} = filesStore;
|
||||
@ -773,6 +780,7 @@ export default inject(
|
||||
setViewAs,
|
||||
withPaging,
|
||||
isEmptyPage,
|
||||
isLoadedEmptyPage,
|
||||
};
|
||||
}
|
||||
)(withRouter(observer(Home)));
|
||||
|
@ -109,6 +109,8 @@ class FilesStore {
|
||||
roomsController = null;
|
||||
filesController = null;
|
||||
|
||||
isLoadedEmptyPage = false;
|
||||
|
||||
constructor(
|
||||
authStore,
|
||||
selectedFolderStore,
|
||||
@ -131,7 +133,6 @@ class FilesStore {
|
||||
|
||||
this.roomsController = new AbortController();
|
||||
this.filesController = new AbortController();
|
||||
|
||||
const { socketHelper, withPaging } = authStore.settingsStore;
|
||||
|
||||
socketHelper.on("s:modify-folder", async (opt) => {
|
||||
@ -425,6 +426,10 @@ class FilesStore {
|
||||
this.isEmptyPage = isEmptyPage;
|
||||
};
|
||||
|
||||
setIsLoadedEmptyPage = (isLoadedEmptyPage) => {
|
||||
this.isLoadedEmptyPage = isLoadedEmptyPage;
|
||||
};
|
||||
|
||||
get tooltipOptions() {
|
||||
if (!this.dragging) return null;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user