Gallery section: smooth fade in of thumbnails after complete loading

With the gallery section, it has always bothered me that when a gallery page is loaded for the first time, the thumbnails that first become visible in the browser window do not fade in smoothly as expected only after they are fully loaded, but that they load normally, quite jerkily in extreme cases. With a slow internet connection, you can even watch the line buildup of the individual thumbnails. This is not visually appealing. With the gallery block, as used in blogs, this behavior does not occur, here the thumbnails fade in smoothly, and only after they have been fully loaded in the background.

As I said, the problem is not noticeable with a fast internet connection, but it is with a slow one. Try setting throttling with the Webdeveloper tool using network analysis: now the unsightly, jerky loading of the thumbnails becomes visible.

After seeing that the parent element figure gets an attribute after the image has finished loading, I was able to use custom CSS code to fix the problem for me. This is the code I put in the head of the page that contains the gallery section, hence the style tags. But of course you can also insert custom CSS globally and address the corresponding section with its ID.
 

<style>
figure.gallery-grid-item {opacity: 0;}
figure.gallery-grid-item[data-loaded="true"] {opacity:1; transition: opacity 1s ease;}
</style>

Now each thumbnail is smoothly fading in after the loading is complete, even with very slow internet connections.