fix: loading Hero Section Image eagerly and map lazily

[rkeerthient]

Relevant Tickets
OPAQF-24, OPAQF-22.

• Added a new loading prop to the Image atom, defaulting to lazy.
• The HeroImage component now explicitly passes loading="eager".
• Updated the Mapbox image to load lazily.

[github-actions]

Warning: Component files have been updated but no migrations have been added. See https://github.com/yext/visual-editor/blob/main/packages/visual-editor/src/components/migrations/README.md for more information.

[coderabbitai]

Walkthrough

The changes add native HTML loading attribute support to image components across the visual editor. A new loading prop with type "lazy" | "eager" is introduced to the Image component's interface with a default value of "lazy", then propagated to underlying image elements. Additionally, loading="lazy" is applied to MapboxStaticMap images, and loading="eager" is applied to HeroImage components to prioritize hero image rendering.

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main changes: adding eager loading to hero section images and lazy loading to maps.
Description check	✅ Passed	The description is directly related to the changeset, referencing relevant tickets and explaining the three key changes made across the files.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch image-loading

---

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f6272d9 and acf156d.

📒 Files selected for processing (3)

• packages/visual-editor/src/components/atoms/image.tsx (4 hunks)
• packages/visual-editor/src/components/contentBlocks/MapboxStaticMap.tsx (2 hunks)
• packages/visual-editor/src/components/contentBlocks/image/HeroImage.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-12-15T20:59:20.838Z

Learnt from: benlife5
Repo: yext/visual-editor PR: 943
File: packages/visual-editor/src/components/contentBlocks/image/Image.tsx:175-191
Timestamp: 2025-12-15T20:59:20.838Z
Learning: In the ImageWrapper component at packages/visual-editor/src/components/contentBlocks/image/Image.tsx, when an Image is wrapped in a MaybeLink, the aria-label should be omitted because the image's alt text serves as the accessible name for the link. Adding an aria-label would override the image's alt text.

Applied to files:

• packages/visual-editor/src/components/contentBlocks/MapboxStaticMap.tsx
• packages/visual-editor/src/components/atoms/image.tsx
• packages/visual-editor/src/components/contentBlocks/image/HeroImage.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: call_unit_test / unit_tests (18.x)
• GitHub Check: call_unit_test / unit_tests (20.x)
• GitHub Check: semgrep/ci

🔇 Additional comments (7)

packages/visual-editor/src/components/contentBlocks/MapboxStaticMap.tsx (2)

170-170: LGTM! Lazy loading for map image improves performance.

The lazy loading attribute is appropriate for the static map image, which may not be immediately visible on page load.

---

183-188: LGTM! Lazy loading for attribution logo is appropriate.

The Mapbox logo in the attribution area is non-critical and can be lazily loaded.

packages/visual-editor/src/components/contentBlocks/image/HeroImage.tsx (1)

90-90: LGTM! Eager loading for hero images optimizes LCP.

Using loading="eager" for hero images ensures they load immediately, which is critical for above-the-fold content and Largest Contentful Paint (LCP) performance.

packages/visual-editor/src/components/atoms/image.tsx (4)

23-23: LGTM! Loading prop type definition is correct.

The loading prop with type "lazy" | "eager" matches the HTML specification for the loading attribute.

---

32-32: LGTM! Default of "lazy" follows performance best practices.

Defaulting to lazy loading is a sensible choice that improves page load performance while allowing eager loading for critical images.

---

86-86: LGTM! Loading attribute correctly applied to fallback img.

The native HTML <img> element correctly receives the loading attribute for the fallback rendering path.

---

69-69: Verify ImageComponent API documentation for loading prop placement.

The loading prop is passed to ImageComponent as a top-level prop (lines 69, 79), while sizes is passed via imgOverrides. Confirm whether ImageComponent from @yext/pages-components supports loading as a top-level prop or if it should be included in the imgOverrides object to ensure consistency.

Also applies to: 78-79

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}