Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add overlay to show loading when changing facet #1705

Merged
merged 9 commits into from
Nov 6, 2023
Merged

Add overlay to show loading when changing facet #1705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7a6edcf
feat: add an experimental overlay to show loading
AlasDiablo Sep 18, 2023
d337421
feat: cleanup and add circular progress to show loading
AlasDiablo Sep 19, 2023
b58bede
fix: re-add lost animation
AlasDiablo Sep 22, 2023
05ceb89
Merge branch 'master' into loading-overlay
AlasDiablo Oct 3, 2023
000f153
feat: use a new state element to handle the loading element
AlasDiablo Oct 3, 2023
fc26ef0
fix: update test unit
AlasDiablo Oct 3, 2023
5fc55da
refactor: use animation instead of transition
AlasDiablo Oct 4, 2023
14bcc16
fix: remove css file to avoid crash
AlasDiablo Oct 4, 2023
09c8463
Merge branch 'master' into loading-overlay
AlasDiablo Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 100 additions & 14 deletions src/app/js/formats/injectData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,61 @@ import {
polyglot as polyglotPropTypes,
} from '../propTypes.js';
import { fromFormat } from '../public/selectors';
import {
preLoadFormatData,
loadFormatData,
unLoadFormatData,
} from '../formats/reducer';
import { preLoadFormatData, loadFormatData, unLoadFormatData } from './reducer';
import Loading from '../lib/components/Loading';
import InvalidFormat from './InvalidFormat';
import { CircularProgress } from '@mui/material';

const styles = {
message: {
margin: 20,
},
format: {
container: {
position: 'relative',
},
loading: {
zIndex: 99998,
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
pointerEvents: 'none',
backgroundColor: 'rgba(0,0,0,0.15)',
opacity: 0,
animationDuration: '150ms',
animationFillMode: 'forwards',
},
progress: {
zIndex: 99999,
top: 'calc(50% - 20px)',
left: 'calc(50% - 20px)',
position: 'absolute',
pointerEvents: 'none',
},
},
};

const animationKeyframes = `
@keyframes injectDataLoadingStart {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes injectDataLoadingEnd {
from {
opacity: 1;
}
to {
opacity: 0;
}
}`;

const getCreateUrl = url => {
if (typeof url === 'function') {
return url;
Expand Down Expand Up @@ -55,11 +96,20 @@ export default (
formatData: PropTypes.any,
formatTotal: PropTypes.any,
isLoaded: PropTypes.bool.isRequired,
isFormatLoading: PropTypes.bool.isRequired,
error: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
location: PropTypes.shape({ pathname: PropTypes.string }),
p: polyglotPropTypes.isRequired,
};

constructor(props) {
super(props);
this.state = {
isLoading: true,
};
this.handleAnimationEnd = this.handleAnimationEnd.bind(this);
}

loadFormatData = ({ ...args }) => {
const { loadFormatData, location } = this.props;

Expand Down Expand Up @@ -109,6 +159,13 @@ export default (

componentDidUpdate(prevProps) {
const { field, resource } = this.props;

if (!this.state.isLoading && this.props.isFormatLoading) {
this.setState({
isLoading: true,
});
}

if (
!field ||
(isEqual(field, prevProps.field) &&
Expand All @@ -121,6 +178,14 @@ export default (
this.loadFormatData();
}

handleAnimationEnd() {
if (this.state.isLoading && !this.props.isFormatLoading) {
this.setState({
isLoading: false,
});
}
}

render() {
const {
loadFormatData,
Expand All @@ -129,6 +194,7 @@ export default (
p: polyglot,
field,
isLoaded,
isFormatLoading,
error,
resource,
...props
Expand Down Expand Up @@ -159,15 +225,34 @@ export default (
}

return (
<FormatView
{...props}
p={polyglot}
field={field}
resource={resource}
formatData={formatData}
formatTotal={formatTotal}
filterFormatData={this.filterFormatData}
/>
<div style={styles.format.container}>
<style>{animationKeyframes}</style>
<div
onAnimationEnd={this.handleAnimationEnd}
style={{
...styles.format.loading,
animationName: isFormatLoading
? 'injectDataLoadingStart'
: 'injectDataLoadingEnd',
}}
></div>
{this.state.isLoading ? (
<CircularProgress
sx={styles.format.progress}
variant="indeterminate"
size={40}
/>
) : null}
<FormatView
{...props}
p={polyglot}
field={field}
resource={resource}
formatData={formatData}
formatTotal={formatTotal}
filterFormatData={this.filterFormatData}
/>
</div>
);
}
}
Expand All @@ -184,6 +269,7 @@ export default (
formatData: fromFormat.getFormatData(state, field.name),
formatTotal: fromFormat.getFormatTotal(state, field.name),
isLoaded,
isFormatLoading: get(state, 'dataset.formatLoading', false),
error: fromFormat.getFormatError(state, field.name),
};
};
Expand Down
5 changes: 5 additions & 0 deletions src/app/js/public/dataset/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,13 @@ export default handleActions(
...state,
error: null,
loading: true,
formatLoading: true,
perPage: (payload && payload.perPage) || state.perPage,
}),
LOAD_FORMAT_DATA_SUCCESS: state => ({
...state,
formatLoading: false,
}),
LOAD_DATASET_PAGE_SUCCESS: (
state,
{ payload: { dataset, page: currentPage, total, fullTotal } },
Expand Down
2 changes: 2 additions & 0 deletions src/app/js/public/dataset/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ describe('dataset reducer', () => {
currentPage: 0,
error: null,
loading: true,
formatLoading: true,
match: 'foo',
perPage: 20,
sort: {},
Expand All @@ -77,6 +78,7 @@ describe('dataset reducer', () => {
currentPage: 0,
error: null,
loading: true,
formatLoading: true,
perPage: 20,
});
});
Expand Down