Bring env files into alignment, some corrections; image loading strategy for event #820
Conversation
| @@ -1,11 +1,19 @@ | |||
| # This is the standard lower environment for Content API. | |||
| # Domain for the CMS Content API | |||
There was a problem hiding this comment.
Most of the env changes are formatting & standardization, except as noted.
| NEXT_PUBLIC_BUILD_TYPE=vagovdev | ||
|
|
||
| # Location to load vets-website assets | ||
| NEXT_PUBLIC_ASSETS_URL=https://dev-va-gov-assets.s3-us-gov-west-1.amazonaws.com/generated/ |
There was a problem hiding this comment.
This is necessary for vets-website assets to be pulled from their S3 bucket; otherwise, they get pulled from dev.va.gov/generated/, which tries to resolve to the next-build/content-build buckets. This works but it is much slower than sourcing from the vets-website bucket.
| NEXT_PUBLIC_BUILD_TYPE=vagovprod | ||
|
|
||
| # Location to load vets-website assets | ||
| NEXT_PUBLIC_ASSETS_URL=https://prod-va-gov-assets.s3-us-gov-west-1.amazonaws.com/generated/ |
There was a problem hiding this comment.
Same note as above: this makes vets-website assets load much faster.
| NEXT_PUBLIC_BUILD_TYPE=vagovstaging | ||
|
|
||
| # Location to load vets-website assets | ||
| NEXT_PUBLIC_ASSETS_URL=https://staging-va-gov-assets.s3-us-gov-west-1.amazonaws.com/generated/ |
| @@ -67,6 +67,7 @@ export const MediaImage = ( | |||
| title={props.title} | |||
| className={props.className} | |||
| style={props.style} | |||
| loading={props.loading} | |||
There was a problem hiding this comment.
This allows us to pass the loading prop to Next.js's <Image /> component. We do this to avoid lazy loading in the image below.
| @@ -88,6 +88,7 @@ export const Event = ({ | |||
| className="event-detail-img vads-u-margin-bottom--3 medium-screen:vads-u-margin-bottom--4" | |||
| {...image} | |||
| imageStyle="7_2_medium_thumbnail" | |||
| loading="eager" | |||
There was a problem hiding this comment.
This image is always above the fold. Previously it was lazy-loading, which caused a large content repaint late in page render. This forces the image to load immediately, which is actually better for page rendering.
Description
The PR addresses issues found during production testing of Events & Event Listings:
Ticket
department-of-veterans-affairs/va.gov-cms#19859
Developer Task
Tasks
Testing Steps
Explain the steps needed for testing
QA steps
What needs to be checked to prove this works?
What needs to be checked to prove it didn't break any related things?
What variations of circumstances (users, actions, values) need to be checked?
Screenshots
Before:
After:
Is this PR blocked by another PR?
DO NOT MERGElabelReviewer
Reviewing a PR
This section lists items that need to be checked or updated when making changes to this repository.
Standard Checks
Tasks
Merging an Approved Layout
When merging a layout, you must ensure that the content type has been turned on for
next-buildinside theCMS. This CMS flag must be turned on for editors to preview their work using the next build preview server.Resource types (layouts) that have not been approved by design should NOT be pushed to production. Ensure that slug.tsx does not include your resource type if it is not approved.
The status of layouts should be kept up to date inside templates.md. This includes QA progress, development progress, etc. A link should be provided for where testing can occur.
Merging a Non-Approved Layout
Your new resource type should not be included inside slug.tsx. Items added here will go into production once merged into the
mainbranch. It is imperative that we do not push anything live that has not been approved.Ensure that this layout has been added to the templates.md file with the current status of the work.