Web: Files: Remove color flicker loader on instant restoration of history.

This commit is contained in:
Tatiana Lopaeva 2021-10-21 13:11:09 +03:00
parent cc9857c904
commit ac0e803072
2 changed files with 30 additions and 7 deletions

View File

@ -16,6 +16,7 @@ class SectionBodyContent extends React.Component {
}; };
this.listKey = 0; this.listKey = 0;
this.listRef = React.createRef(); this.listRef = React.createRef();
this.timerId = null;
} }
componentDidMount() { componentDidMount() {
@ -34,10 +35,26 @@ class SectionBodyContent extends React.Component {
fetchFileVersions(fileId).then(() => setIsLoading(false)); fetchFileVersions(fileId).then(() => setIsLoading(false));
}; };
onSetRestoreProcess = (isRestoreProcess) => { onSetRestoreProcess = (restoring) => {
const { isRestoreProcess } = this.state;
if (restoring) {
this.timerId = setTimeout(
() =>
this.setState({ this.setState({
isRestoreProcess, isRestoreProcess: restoring,
}),
100
);
} else {
clearTimeout(this.timerId);
this.timerId = null;
restoring !== isRestoreProcess &&
this.setState({
isRestoreProcess: restoring,
}); });
}
}; };
onUpdateHeight = (i, itemHeight) => { onUpdateHeight = (i, itemHeight) => {
if (this.listRef.current) { if (this.listRef.current) {
@ -85,6 +102,7 @@ class SectionBodyContent extends React.Component {
const { versions, isLoading } = this.props; const { versions, isLoading } = this.props;
const renderList = ({ height, width }) => { const renderList = ({ height, width }) => {
console.log("this.state", this.state);
return ( return (
<StyledVersionList isRestoreProcess={this.state.isRestoreProcess}> <StyledVersionList isRestoreProcess={this.state.isRestoreProcess}>
<List <List

View File

@ -7,6 +7,7 @@ class VersionHistoryStore {
versions = null; versions = null;
filesStore = null; filesStore = null;
showProgressBar = false; showProgressBar = false;
timerId = null;
constructor(filesStore) { constructor(filesStore) {
makeObservable(this, { makeObservable(this, {
@ -79,7 +80,7 @@ class VersionHistoryStore {
}; };
restoreVersion = (id, version) => { restoreVersion = (id, version) => {
this.setShowProgressBar(true); this.timerId = setTimeout(() => this.setShowProgressBar(true), 100);
return api.files return api.files
.versionRestore(id, version) .versionRestore(id, version)
@ -87,9 +88,13 @@ class VersionHistoryStore {
const updatedVersions = this.versions.slice(); const updatedVersions = this.versions.slice();
updatedVersions.splice(1, 0, newVersion); updatedVersions.splice(1, 0, newVersion);
this.setVerHistoryFileVersions(updatedVersions); this.setVerHistoryFileVersions(updatedVersions);
this.setShowProgressBar(false);
}) })
.catch(() => this.setShowProgressBar(false)); .catch((e) => console.error(e))
.finally(() => {
clearTimeout(this.timerId);
this.timerId = null;
this.setShowProgressBar(false);
});
}; };
updateCommentVersion = (id, comment, version) => { updateCommentVersion = (id, comment, version) => {