question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:8 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
brh55commented, Oct 19, 2017

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

0reactions
brh55commented, Oct 3, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

image-rendering - CSS: Cascading Style Sheets | MDN
The image-rendering CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other ......
Read more >
Problem with footer before render the content - Stack Overflow
I cannot put my footer component on bottom BEFORE the container component being rendered. I've got an spinner loader watting for async data,...
Read more >
10 Rendering — HTML5 - W3C
When an img element or an input element when its type attribute is in the Image Button state does not represent an image,...
Read more >
How to Build a Skeleton Screen with CSS for Better UX
Content Placeholders are typically light grey boxes and circles that simulate the appearance of the page, as shown in the images above for ......
Read more >
How To Fix Cumulative Layout Shift (CLS) Issues
I advise using the Intrinsic Size (which is the actual size of the image source) and the browser will then scale these down...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found