[WIP] Fix cumulative layout shift on home page

[Copilot]

Plan to Eliminate CLS on Home Page

• [x] Analyze the Partners-home section component causing CLS
• [x] Implement skeleton/placeholder for partner images to reserve space
• [ ] Test the changes with development server
• [ ] Verify no layout shift occurs during image loading
• [ ] Take screenshots to demonstrate the fix

Changes Made

Fixed Cumulative Layout Shift (CLS) in Partners Section

Root Cause: The LazyPartnerImage component was returning null while images were loading, causing no space to be reserved. When images loaded, they caused the layout to shift.

Solution:

• Modified LazyPartnerImage to render a placeholder div with exact image dimensions while loading
• Added corresponding CSS styling for the placeholder to match image margins
• This reserves space before images load, preventing layout shift

Files Modified:

1. src/sections/Home/Partners-home/index.js - Added placeholder div with dimensions
2. src/sections/Home/Partners-home/partnerSection.style.js - Added CSS for placeholder

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Eliminate Cumulative Layout Shift (CLS) on home page</issue_title> <issue_description>### Current Behavior The attached screenshot has an example of unwanted behavior in which content is displayed to halfway while it is only partially rendered.

Desired Situation

Ideally content is fully rented before is displayed so as to avoid a negative CLS effect. Appropriately sized placeholders can be used as one of the techniques to prevent unwanted shifting.

Screenshot

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form. </issue_description>

<agent_instructions>Split each improvement into it's own pull request.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes layer5io/layer5#7257

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[l5io]

🚀 Preview for commit 65e8a978b81115604073b77e66c5e6d345ecf4e6 at: https://69383b2a8c93ba093ec38476--layer5.netlify.app