[Masonry] Better support for Suspense

[liuyenwei]

Problem

At the moment, Masonry has built in functionality for fetching additional items on scroll through the FetchItems component that is rendered after the grid body: https://github.com/pinterest/gestalt/blob/master/packages/gestalt/src/Masonry.js#L583

The current implementation presents a problem when attempting to use Masonry with a data fetching library that utilizes Suspense (i.e. relay). Because we are unable to specify a more granular Suspense boundary, each subsequent fetch results in Masonry being unmounted/remounted.

Repro:

Here's a minimum repro that demonstrates what I'm describing: https://codesandbox.io/s/gestalt-forked-zd6lwm

As you scroll the grid, you'll notice that the Suspense boundary appears and unmounts the entire grid.

[anushaNemilidinne]

Hello! Is anyone working on this? or Can I take up this?

[dangerismycat]

Hey Anusha! 👋 We looked into this a bit and we're going to take a different approach, likely involving changes outside of Masonry itself. @liuyenwei is determining our exact strategy for the next attempt to address this. If changes external to Gestalt are necessary, we'll be sure to update the Masonry docs.