Images not visible on frontpage while loading

First of all, thanks for a great theme!

There seems to be some JavaScript included in this theme that handles the “masonry” image grid effect, but it’s written in such a way that visitors to the page see nothing at all until all images have finished loading, which can take quite a long time on mobile devices with flaky internet connections.

I have recorded a demo below where I have throttled the internet speed to “3G” speeds in Chrome. Even with a modest 9 images on the frontpage, the page takes well over 20 seconds to show anything to the user. In addition there is a bit of layout shift where the grid briefly loads in one column, and then disappears once the JS kicks in, only to reappear in the correct masonry layout once all images are loaded.

I believe WordPress keeps the image height/width in the image metadata, so perhaps it would be possible to use that when loading the masonry instead of waiting for the DOM load event? Or allow users to switch to a “simple grid” mode in the theme settings that would just use a normal Flexbox/CSS grid?

Demo:
https://drive.google.com/file/d/1erHnSkOf9XfXqlMZx5mLwrCUIEi6qnVr/view?usp=sharing