Fix deserialization of array query params

[tchan]

When Ember serializes an Array type param, it does so with JSON.stringify.
The deserialize converts back to an Array, but if you have a slow connection, the serialize method gets called again before deserialize which results in re-stringifying a string.

Visual summary of what happens under the hood

I've reproduced this behaviour with a twiddle here https://ember-twiddle.com/bc34a1cdf99ce9a013ace8bca3d25162?openFiles=controllers.application.js%2C

This is not ideal but for the above twiddle to work you need to use the allow-control-allow-origin* chrome extension as I'm making an external ajax request each time the query params is updated. Otherwise you'll get a console error No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.. Not sure how to bypass this otherwise.

Steps:

1. Simulate a slow connection by applying network throttling. In the gif I used a custom profile on Chrome with 10kb/s and 20,000ms of added latency.
2. Click a checkbox (arrays query param)
3. Start typing in the search bar.

Gif of what happens to the URL due to deserializing getting called before serialize which is apparent with a really slow internet connection

Gif of what happens with a standard connection (expected behaviour)

Related issues:
#14174
#13591
#14171

[acorncom]

@tchan think you could add a test here? This is likely to be a future area of churn so might help to have your case covered so it doesn’t come up again ...

[tpetrone]

Greetings, any updates on this?
Tks

[tchan]

Hey @tpetrone , I haven't had any time to write a test for this, feel free to take over if you want :)

[tpetrone]

Tks @tchan !

@arthurmde do you think we can tackle it?