(1) Reduced the debouncing duration so that the final element can be rendered asap after visible.
- If the user is scrolling non-stop, it would continue to debounce and the GUI ends up not showing the final element.
- 25ms seems enough to prevent the initial false-positive that occurs in the scenario of "adjacent/upper elements resized late, so our element was briefly on screen when mounted". If not enough, we can make this a parameter.
(2) Removed `lastUpdateDate` that was a quick hack for Recommended section. We don't use it on that element anymore, so remove the hack to keep the file clean.
(1) The previous code assumed the element is always smaller than the screen. When used on large items like "homepage categories", it'll never load because the element exceeds the screen width or height.
(2) Added optional placeholder element. This allows us to put a cheaper element while waiting, so that the layout doesn't shift when we finally render. This is visually better when scrolling, and complies with Web Vitals.
## 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?
There are cases where `WaitUntilOnPage` will incorrectly render, such as at the beginning if the upper components hasn't expanded to full size, so `WaitUntilOnPage` would be briefly visible.
Added a 300ms debounce to fix this, which would also improve scrolling performance a bit by doing less. Hopefully 300ms is enough for the upper components to inflate to full size.
