Videos UI: Better cache handling.

[andres-blanco]

This PR derives from a discussion on how to handle caching/refetching.

This uses two react query options: refetchOnReconnect and refetchOnWindowFocus. The intended result is that a refetch is triggered every time the VideoUI component is loaded but DO NOT refetch on window focus.

Testing

1. Apply this patch.
2. Open the Video UI from the card.
3. Verify that the query is executed.
4. Change tabs and verify that when you come back the query is not executed again.
5. Verify that after closing and reopening the popup the query is re-executed.

[github-actions]

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:commit-afd2a0206d6c1334f4afcfabf8ad09bbb43af61a
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:commit-afd2a0206d6c1334f4afcfabf8ad09bbb43af61a&env=jetpack
(These links may take a few minutes to be available)

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~4 bytes added 📈 [gzipped])

name  parsed_size           gzip_size
home        +21 B  (+0.0%)       +4 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.