✨ Image Loading - Prevent layout shifts and improve loading state for images

[ssw-yakshaver]

Requested by: @isaaclombardssw via YakShaver.ai 🦬
cc: @isaaclombardssw, @Marxoz, @joshbermanssw

Hi Team!

  🟥  Watch the video (1 min 33 sec)

  Url from screen share: https://tina-docs-novx8hpk-tinacms.vercel.app/tinadocs/docs/introduction/showcase

Pain

When expanding sections or navigating pages in Tina-docs, images that have not yet loaded cause awkward layout shifts. Improve the user experience by preventing layout shifts through pre-known image dimensions and displaying a more polished loading skeleton while images load. This is a low-priority, quality-of-life enhancement.

Acceptance Criteria

1. Images render without causing layout shifts when sections are expanded or pages are loaded.
2. Image dimensions (width and height or aspect ratio) are known before render, based on metadata captured at upload time.
3. A skeleton placeholder is displayed while images are loading.
4. The loading skeleton visually fits the final image area and appears less awkward than the current behavior.
5. The change applies consistently across pages and expandable sections in Tina-docs.
6. No regressions to existing image rendering or loading behavior.

Screenshot

Figure: Awkward image loading causes layout shifts when images have unknown dimensions