I've introduced an artificial delay in my copy of the tree to show what would happen if a new spoc is to be displayed, and the spoc feed only loads after 4 seconds. This is tested using the basic layout.

Currently, when opening a new window, the whole "Recommended by Pocket" section stays blank until the spoc arrives, at which time that whole section renders:

https://monosnap.com/file/hCN4pSqJZlDERkH4xrJw7iCQ6zRGvW#

A placeholder prototype option forthcoming...

Here, I've made a spoc that hasn't yet arrived render a placeholder card instead. Two things of note:

• in code in tree (video in comment 1), the spoc is inserted in the feed, and the remaining items in the feed and simply moved over, causing the last item in the set of (however many) not to be shown. In this case, due to a code limitation we have to simply replace one of the feed items with the spoc item, so it's this earlier feed item in the array that doesn't get shown. Technically, it is possible to preserve the existing behavior in a way that is upliftable by doing a very gross code hack.
• more interestingly, the spoc that is shown in the video is taller than the other stories, but that's not known until the spoc data arrives, meaning that if you look at the video closely, the whole top row gets resized to be taller after the spoc arrives, pushing the row below it down. So we're trading one kind of jank for another. We could probably make the cards be a fixed height without too much trouble, as one way of solving that issue...

https://monosnap.com/file/sPHyOdHaepQIVH4eKnZ79sSNLcT5FP#

A third option is that we render only the search at the top, and wait for all the spocs to come in, and then render all the rest at once so it doesn't jank. Probably the cleanest way to go.

https://monosnap.com/file/iOJVasZMTIZNwyRssGgyJsePAiDTj9#

Any of these options could potentially have a spinner added to it. Adding one in content would be straightforward; it might or might not be straightforward to simply make the browser throbber rotate like it does when loading normal content pages.

Wolasi, Nick, what are your thoughts here?

My vote is for the placeholder spoc option, we can approximate the height within a couple of pixels based on the line limits for the other cards.

Placeholder height for 3 col grid 364px
Placeholder height for 4 col grid 316px

And for the borderless variant

Placeholder height for 3 col grid 348px
Placeholder height for 4 col grid 300px

So I've implemented that, and it fixes things nicely for the case where (eg) the story displaced by the spoc has a longer excerpt, and the other three have close to the max:

http://take.ms/ecNba

Unfortunately, it then creates jank for the opposite case: where the displaced story has a shorter excerpt and the other three have close to the max:

http://take.ms/iUdki

Avoiding edge cases here is going to be lots of fun, I think.

After discussion in a meeting, we have a new strategy for dealing with loading and various states, so this code won't be landing.