Tom Butcher
e3a20e6b48
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Introduced LazyWhenVisible component to optimize rendering of dashboard sections based on scroll visibility, improving performance. - Updated DashboardOverviewPage to utilize LazyWhenVisible for sections containing stats, history, or tables, enhancing user experience by loading content only when visible. - Added useScrollVisibility hook to manage visibility state, ensuring efficient resource usage during scrolling.
35 lines
741 B
JavaScript
35 lines
741 B
JavaScript
import PropTypes from 'prop-types'
|
|
import useScrollVisibility from '../hooks/useScrollVisibility'
|
|
|
|
const LazyWhenVisible = ({
|
|
scrollRootRef,
|
|
minHeight,
|
|
enabled = true,
|
|
children
|
|
}) => {
|
|
const { targetRef, isVisible } = useScrollVisibility(scrollRootRef, {
|
|
enabled
|
|
})
|
|
|
|
if (!enabled || isVisible) {
|
|
return children
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={targetRef}
|
|
style={minHeight != null ? { minHeight } : undefined}
|
|
aria-hidden
|
|
/>
|
|
)
|
|
}
|
|
|
|
LazyWhenVisible.propTypes = {
|
|
scrollRootRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
|
|
minHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
enabled: PropTypes.bool,
|
|
children: PropTypes.node
|
|
}
|
|
|
|
export default LazyWhenVisible
|