Phase 2: Add conservative lazy-loading and intrinsic sizes to avatars… - #6
Merged
Conversation
…/thumbnails Add loading="lazy" to list avatars and thumbnails where safe, and add width/height attributes when inline styles already specify sizes to reduce CLS. Leave modal/preview/fullsize images and brand logos unchanged for safety. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds conservative lazy-loading (loading="lazy") to avatar and thumbnail![]()
elements across the UI and adds width/height attributes where inline styles already specified explicit pixel sizes to reduce Cumulative Layout Shift (CLS).
What changed
Added loading="lazy" to list avatars and thumbnails in Customers, Users, Employees, Suppliers, Loyalty, Profile, and relevant JS templates.
Added width and height attributes for images that already had inline size styles (32x32 and 56x56) to provide intrinsic sizing and help prevent layout shifts.
Did NOT modify modal/fullsize/cropper/global viewer images or brand logos; these were intentionally left unchanged.
Why
Improve page load performance by deferring non-critical image loads.
Reduce CLS by supplying intrinsic sizes for small avatars and thumbnails where pixel sizes were known.
Testing checklist
Build and run the app locally.
Verify avatars and thumbnails render correctly on Customers, Users, Employees, Suppliers, Loyalty, and Profile pages.
Check that interactive preview/cropper modals still show images immediately (we left those unchanged).