@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
50 lines (49 loc) • 1.76 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cx, keyframes, makeStyles } from '@jbrowse/core/util/tss-react';
const useStyles = makeStyles()({
container: {
position: 'relative',
width: '100%',
height: '100%',
minHeight: 20,
},
overlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(255, 255, 255, 0.15)',
backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0, 0, 0, 0.05) 8px, rgba(0, 0, 0, 0.05) 16px)',
pointerEvents: 'none',
zIndex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
opacity: 0,
},
visible: {
opacity: 1,
},
dots: {
fontSize: '0.8rem',
fontWeight: 300,
'&::after': {
display: 'inline-block',
content: '""',
width: '1em',
textAlign: 'left',
animation: `${keyframes `
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
`} 1.2s infinite ease-in-out`,
},
},
});
export default function LoadingOverlay({ statusMessage, children, height, }) {
const { classes } = useStyles();
const isLoading = !!statusMessage;
return (_jsxs("div", { className: classes.container, style: height ? { minHeight: height } : undefined, children: [children, _jsx("span", { className: cx(classes.overlay, isLoading && classes.visible), "data-testid": isLoading ? 'loading-overlay' : undefined, children: _jsx("span", { className: classes.dots, children: statusMessage || 'Loading' }) })] }));
}