fix(media): make sure we reset 'nextPageHandle' in case query changes

[flootr]

Changes proposed in this Pull Request

Reported via p1596152527276500-slack-C02DQP0FP

• media state: make sure nextPageHandle is reset in case query changes
• media data layer: don't refill the store with data in case the query changed during the request

There seemed to be timing issues where switching back and forth between filters in the media library (Images, Documents, etc) would mix up request. That caused a new request, for example on Images, to use query data from the previously chosen filter (especially nextPageHandle) and wouldn't fetch most recent data but where the previous request finished.

Testing instructions

1. Go to a site with a lot of images (> 200) and open the media library /1
2. Now switch back and forth between "All" and "Images"
3. Make sure you always get the most recent image first after switching
4. It's also a good idea to smoke test media library on /media, classic editor and Gutenberg

/1 to reproduce this bug (on the main branch) it's necessary to change filters while images are still being loaded

[matticbot]

Test live: https://calypso.live/?branch=fix/media-fetching-page-handle

[matticbot]

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

App Entrypoints (~36 bytes added 📈 [gzipped])

name        parsed_size           gzip_size
entry-main        +95 B  (+0.0%)      +36 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~564 bytes added 📈 [gzipped])

name              parsed_size           gzip_size
stats                  +697 B  (+0.1%)     +173 B  (+0.1%)
woocommerce            +448 B  (+0.0%)      +72 B  (+0.0%)
settings-writing       +448 B  (+0.1%)      +65 B  (+0.0%)
settings               +448 B  (+0.1%)      +65 B  (+0.0%)
post-editor            +448 B  (+0.0%)      +59 B  (+0.0%)
media                  +448 B  (+0.1%)      +65 B  (+0.1%)
gutenberg-editor       +448 B  (+0.0%)      +65 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.

Async-loaded Components (~78 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
async-load-design-blocks       +448 B  (+0.0%)      +78 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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.

[sarayourfriend]

LGTM. Good work digging into that issue 👍