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 = {
|
type Props = {
|
||||||
children: any,
|
children: any,
|
||||||
|
lastUpdateDate?: any,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function WaitUntilOnPage(props: Props) {
|
export default function WaitUntilOnPage(props: Props) {
|
||||||
const ref = React.useRef();
|
const ref = React.useRef();
|
||||||
const [shouldRender, setShouldRender] = React.useState(false);
|
const [shouldRender, setShouldRender] = React.useState(false);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
setShouldRender(false);
|
||||||
|
}, [props.lastUpdateDate]);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
const handleDisplayingRef = debounce(e => {
|
const handleDisplayingRef = debounce(e => {
|
||||||
const element = ref && ref.current;
|
const element = ref && ref.current;
|
||||||
|
|
|
@ -25,6 +25,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
this.didSearch = undefined;
|
this.didSearch = undefined;
|
||||||
|
this.lastReset = undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -36,6 +37,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
|
||||||
|
|
||||||
if (uri !== prevProps.uri) {
|
if (uri !== prevProps.uri) {
|
||||||
this.didSearch = false;
|
this.didSearch = false;
|
||||||
|
this.lastReset = Date.now();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (claim && !this.didSearch) {
|
if (claim && !this.didSearch) {
|
||||||
|
@ -60,6 +62,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
|
||||||
}
|
}
|
||||||
|
|
||||||
didSearch: ?boolean;
|
didSearch: ?boolean;
|
||||||
|
lastReset: ?any;
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { recommendedContent, isSearching, isAuthenticated } = this.props;
|
const { recommendedContent, isSearching, isAuthenticated } = this.props;
|
||||||
|
@ -69,7 +72,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
|
||||||
isBodyList
|
isBodyList
|
||||||
title={__('Related')}
|
title={__('Related')}
|
||||||
body={
|
body={
|
||||||
<WaitUntilOnPage>
|
<WaitUntilOnPage lastUpdateDate={this.lastReset}>
|
||||||
<ClaimList
|
<ClaimList
|
||||||
isCardBody
|
isCardBody
|
||||||
type="small"
|
type="small"
|
||||||
|
|
Loading…
Add table
Reference in a new issue