Fix 'Related' being loaded on Autoplay despite not visible.
## Issue In the `Autoplay` case, if the `WaitUntilOnPage` has already opened the gates previously, the next video's Related will be loaded regardless of scroll position. ## Changes Add a `lastUpdateDate` prop to `WaitUntilOnPage` to allow the parent to reset the gating state. I don't really like the `lastUpdateDate` prop since it's purpose is not intuitive. Is there a standard way to do a "one-time trigger" from the parent?
This commit is contained in:
parent
c1dbb752d8
commit
0ab5ca080e
2 changed files with 9 additions and 1 deletions
|
@ -6,12 +6,17 @@ const DEBOUNCE_SCROLL_HANDLER_MS = 300;
|
|||
|
||||
type Props = {
|
||||
children: any,
|
||||
lastUpdateDate?: any,
|
||||
};
|
||||
|
||||
export default function WaitUntilOnPage(props: Props) {
|
||||
const ref = React.useRef();
|
||||
const [shouldRender, setShouldRender] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
setShouldRender(false);
|
||||
}, [props.lastUpdateDate]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleDisplayingRef = debounce(e => {
|
||||
const element = ref && ref.current;
|
||||
|
|
|
@ -25,6 +25,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
|
|||
super();
|
||||
|
||||
this.didSearch = undefined;
|
||||
this.lastReset = undefined;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
@ -36,6 +37,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
|
|||
|
||||
if (uri !== prevProps.uri) {
|
||||
this.didSearch = false;
|
||||
this.lastReset = Date.now();
|
||||
}
|
||||
|
||||
if (claim && !this.didSearch) {
|
||||
|
@ -60,6 +62,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
|
|||
}
|
||||
|
||||
didSearch: ?boolean;
|
||||
lastReset: ?any;
|
||||
|
||||
render() {
|
||||
const { recommendedContent, isSearching, isAuthenticated } = this.props;
|
||||
|
@ -69,7 +72,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
|
|||
isBodyList
|
||||
title={__('Related')}
|
||||
body={
|
||||
<WaitUntilOnPage>
|
||||
<WaitUntilOnPage lastUpdateDate={this.lastReset}>
|
||||
<ClaimList
|
||||
isCardBody
|
||||
type="small"
|
||||
|
|
Loading…
Reference in a new issue