Render the content header, footer and placeholder before the actual image renders

[srameshr]

Love react-native-masonry? Please consider supporting our collective:
👉 https://opencollective.com/react-native-masonry/donate ❤️

There is a considerable delay between Masonry being called and the actual content being rendered.
This occurs even on most light weight data, such as 20 masonry images with each being no more than 200kb and in spite of using FastImage.
Hence, corresponding feature request would be to have a fixed height (before rendering or take image dimensions as props) for each element and show an ActivityInidicator or any placeholder.

[brh55]

Have you tried something like: https://github.com/oblador/react-native-image-progress

[srameshr]

My point is render the masonry header, footer and some fixed height placeholder between them so that the users know that something will be rendered in the place of the placeholder.
Right now, neither the masonry header or footer gets rendered until the complete image loads and the whole screen is blank until the image loads.

[brh55]

@srameshr I see your point. Hoping there is away we can probably get it to smoothen out the transition between loading the images and the cards.

[srameshr]

I think it would be ok even if it flashes. Since we have no idea about the size of the image before rendering it, we would have to most likely go with the fixed height placeholder. As and when the image is downloaded and the size and column is calculated, we should go ahead and insert it into the corresponding card. As the fixed placeholder height will be most probably be different the column will flash once before update. Its ok.

[srameshr]

@brh55

[brh55]

@srameshr sorry I'll be out for a week on vaycay. shall be back in business on the 30th.

[chismadalina]

Any updates on this?

[brh55]

This can be done, but my only concern is it may lead to a rather awkward UI experience because we don't know the dimensions until the image has loaded.