Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughReplaced many HTML Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/site/next.config.mjs (1)
258-266:⚠️ Potential issue | 🟡 MinorAdd
avatar.vercel.shtoremotePatternsfor optimized avatar renderingWith image optimization now enabled (
unoptimized: false), theAvatarcomponent intestimonial-item.tsxdynamically generates avatars fromhttps://avatar.vercel.sh/when no custom image is provided. Since this domain isn't inremotePatterns, Next.js will skip optimization for these generated avatars, missing an opportunity to serve them more efficiently.Add this pattern to enable optimization:
Proposed fix
images: { unoptimized: false, remotePatterns: [ { protocol: "https", hostname: "cdn.sanity.io", }, + { + protocol: "https", + hostname: "avatar.vercel.sh", + }, ], },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/next.config.mjs` around lines 258 - 266, Update the Next.js images remotePatterns so avatar.vercel.sh is allowed for optimized images: in the images.remotePatterns array (the block that currently lists protocol "https" and hostname "cdn.sanity.io") add an entry with protocol "https" and hostname "avatar.vercel.sh" so the Avatar component in testimonial-item.tsx (which generates https://avatar.vercel.sh/ URLs) can be processed by Next's image optimizer when unoptimized is false.
🧹 Nitpick comments (4)
apps/site/src/components/homepage/bento.tsx (1)
197-208: Homepage bento cards may benefit fromloading="eager"The bento section appears prominently on the homepage. Using
loading="lazy"here might cause a visible delay as users wait for images to load after the initial render.For above-fold or near-above-fold content,
loading="eager"(or omitting the prop entirely, which defaults to eager in Next.js Image) ensures images load with the page.♻️ Suggested change
<Image src={ mounted && resolvedTheme === "light" ? `${card.image}_light.svg` : `${card.image}.svg` } alt={card.title} width={1200} height={800} - loading="lazy" + loading="eager" className="px-4 z-2 pt-0 pb-0 min-w-full min-h-[60%] object-fill object-[top_left] [mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)_60%,transparent_90%)] [-webkit-mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)_60%,transparent_90%)]" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/homepage/bento.tsx` around lines 197 - 208, The Image in the bento card rendering currently sets loading="lazy" which can delay above‑the‑fold artwork; update the Image usage in the bento component (the <Image ... /> instance that uses mounted, resolvedTheme and card.image/card.title) to use loading="eager" or remove the loading prop so it defaults to eager in Next.js, ensuring the prominent homepage card images load immediately.apps/site/src/app/client/page.tsx (1)
239-245: Considerloading="eager"for above-fold iconsThese database and framework icons appear in a prominent section that may be visible on initial page load (after the hero). Browser lazy loading typically kicks in for content more than ~3 viewport heights below the fold.
If users see a flash of empty space before icons load, consider using
loading="eager"for these. Otherwise, if the section is consistently below the fold,lazyis fine.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/client/page.tsx` around lines 239 - 245, The Image components rendering db icons (the <Image ... src={db.icon} alt={db.name} width={48} height={48} loading="lazy" /> instances) are likely above-the-fold; change their loading prop from "lazy" to "eager" so the icons load immediately (or add a simple heuristic/prop to switch to "eager" when the icons are in the hero/above-fold section). Update the Image JSX to use loading="eager" (or conditionalize that prop) for the above-fold database/framework icon renderings.apps/site/src/components/postgres.tsx (1)
67-116: Consider more accurate dimensions for SVG imagesThe
width={1200}andheight={800}dimensions are quite large for images constrained bymd:max-h-83(~332px). While this works because SVGs scale, Next.js uses these values to calculate aspect ratio and reserve layout space.For more predictable layout behavior, you have two options:
- Use dimensions closer to actual display size (if you know the SVG's natural aspect ratio)
- Use
fillwith a sized container for responsive imagesThis is a minor point since SVGs handle scaling gracefully, but worth noting for consistency.
♻️ Alternative using fill prop
-<Image - src={`${body.image}.svg`} - alt={body.title} - width={1200} - height={800} - loading="lazy" - className="hidden lg:dark:block md:max-h-83" -/> +<div className="relative hidden lg:dark:block md:max-h-83 w-full aspect-[3/2]"> + <Image + src={`${body.image}.svg`} + alt={body.title} + fill + loading="lazy" + className="object-contain" + /> +</div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/postgres.tsx` around lines 67 - 116, The Image elements rendering `${body.image}` variants use width={1200} height={800}, which overestimates the rendered size (constrained by md:max-h-83); update the six <Image ... /> usages in this component to either (A) use realistic dimensions matching the displayed aspect ratio and max height (for 3:2 SVGs set width={498} height={332} or equivalent) or (B) switch to next/image's fill mode and wrap each Image in a positioned container (give the parent a relative position and explicit height) so the images are responsive and layout reservations match the visible size; adjust classNames as needed to keep md:max-h-83 behavior.apps/site/src/components/homepage/card-section/card-section.tsx (1)
186-188: Minor:loadingprop is redundant whenpriority={true}.When
priorityis set totrue, Next.js automatically disables lazy loading and preloads the image. The explicitloading={index === 0 ? "eager" : "lazy"}is effectively ignored for the first image wherepriority={true}.You could simplify by removing the
loadingprop entirely and relying solely onpriority:♻️ Suggested simplification
<Image key={`desktop-img-${index}`} className={cn( "hidden sm:block w-full h-auto", !item.noShadow && "shadow-[0_10px_25px_-5px_rgba(0,0,0,0.1)]", )} src={ mounted && resolvedTheme === "light" ? `${item.imageUrl}_light.svg` : `${item.imageUrl}.svg` } alt={item.imageAlt || ""} width={1200} height={800} priority={index === 0} - loading={index === 0 ? "eager" : "lazy"} />Same applies to the mobile
<Image>at lines 205-207.Also applies to: 205-207
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/homepage/card-section/card-section.tsx` around lines 186 - 188, The Image components in card-section.tsx are passing both priority={index === 0} and loading={index === 0 ? "eager" : "lazy"}; remove the redundant loading prop and keep priority={index === 0} (Next.js will disable lazy-loading automatically for priority images). Apply the same removal for the mobile Image instance (the other <Image> with the same index check) so only priority is used for the first image and others rely on default lazy behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/about/page.tsx`:
- Around line 342-355: The hero background Image components (both instances
rendering "/illustrations/about/hero_bg.svg" and
"/illustrations/about/hero_bg_light.svg") should be loaded with high priority so
they render above-the-fold without a flash; replace loading="lazy" with priority
or priority={true} (and remove the lazy attribute) on both Image components to
match the careers page pattern and ensure immediate rendering of the hero
backgrounds.
---
Outside diff comments:
In `@apps/site/next.config.mjs`:
- Around line 258-266: Update the Next.js images remotePatterns so
avatar.vercel.sh is allowed for optimized images: in the images.remotePatterns
array (the block that currently lists protocol "https" and hostname
"cdn.sanity.io") add an entry with protocol "https" and hostname
"avatar.vercel.sh" so the Avatar component in testimonial-item.tsx (which
generates https://avatar.vercel.sh/ URLs) can be processed by Next's image
optimizer when unoptimized is false.
---
Nitpick comments:
In `@apps/site/src/app/client/page.tsx`:
- Around line 239-245: The Image components rendering db icons (the <Image ...
src={db.icon} alt={db.name} width={48} height={48} loading="lazy" /> instances)
are likely above-the-fold; change their loading prop from "lazy" to "eager" so
the icons load immediately (or add a simple heuristic/prop to switch to "eager"
when the icons are in the hero/above-fold section). Update the Image JSX to use
loading="eager" (or conditionalize that prop) for the above-fold
database/framework icon renderings.
In `@apps/site/src/components/homepage/bento.tsx`:
- Around line 197-208: The Image in the bento card rendering currently sets
loading="lazy" which can delay above‑the‑fold artwork; update the Image usage in
the bento component (the <Image ... /> instance that uses mounted, resolvedTheme
and card.image/card.title) to use loading="eager" or remove the loading prop so
it defaults to eager in Next.js, ensuring the prominent homepage card images
load immediately.
In `@apps/site/src/components/homepage/card-section/card-section.tsx`:
- Around line 186-188: The Image components in card-section.tsx are passing both
priority={index === 0} and loading={index === 0 ? "eager" : "lazy"}; remove the
redundant loading prop and keep priority={index === 0} (Next.js will disable
lazy-loading automatically for priority images). Apply the same removal for the
mobile Image instance (the other <Image> with the same index check) so only
priority is used for the first image and others rely on default lazy behavior.
In `@apps/site/src/components/postgres.tsx`:
- Around line 67-116: The Image elements rendering `${body.image}` variants use
width={1200} height={800}, which overestimates the rendered size (constrained by
md:max-h-83); update the six <Image ... /> usages in this component to either
(A) use realistic dimensions matching the displayed aspect ratio and max height
(for 3:2 SVGs set width={498} height={332} or equivalent) or (B) switch to
next/image's fill mode and wrap each Image in a positioned container (give the
parent a relative position and explicit height) so the images are responsive and
layout reservations match the visible size; adjust classNames as needed to keep
md:max-h-83 behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 5c1faf72-c7cd-44d2-b5c6-fdddb345f90f
📒 Files selected for processing (13)
apps/site/next.config.mjsapps/site/src/app/about/page.tsxapps/site/src/app/careers/page.tsxapps/site/src/app/client/page.tsxapps/site/src/app/orm/page.tsxapps/site/src/components/homepage/bento.tsxapps/site/src/components/homepage/card-section/card-section.tsxapps/site/src/components/homepage/testimonials/testimonial-item.tsxapps/site/src/components/logo-parade.tsxapps/site/src/components/postgres.tsxapps/site/src/components/prisma-with/community-section.tsxapps/site/src/components/prisma-with/hero.tsxpackages/eclipse/src/components/avatar.tsx
mhartington
previously approved these changes
Apr 2, 2026
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
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
2 participants
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.
Summary by CodeRabbit
New Features
Chores