Front page gallery images need 'loading' skeleton

[Lordfirespeed]

due to image lazy-loading, slides are transparent on initial page load

we should either

• give images a background which will be rendered while they load
• render a 'skeleton' while the image is loading

[SkyePal42]

Use progressive image technique?
https://www.yzlow.com/progressive-image-loading-with-nextjs

[Lordfirespeed]

the images don't take long to load, next already optimises them fairly well

Images for slides that are out of view by default don't get fetched until the slide is revealed; involving an image of any resolution in the placeholder will not resolve the issue, as those images will still have to be fetched (although fetching them would be quicker than fetching the fullres image) resulting in a lag before anything is displayed

we need a placeholder that relies only on html/css

[SkyePal42]

what about a durhack logo svg set as the image's background-image so that it is sent/embedded in the html/css and shows first before having the actual image load over it... i think that's how it works... yes it is :)
https://codepen.io/boomkiller1119/pen/yLmjrdx w/ throttle 3G and no cache -> can see svg load and then image loads on top
original codepen: https://codepen.io/jdsteinbach/pen/aQOZBE

[Lordfirespeed]

yeah that would work but I feel that's gonna look tacky + overcomplicate something simple