Conversation
📝 WalkthroughWalkthroughAdds client-side image loading state and fallback flow (optimized → unoptimized → placeholder) to WaveDropAuthorPfp, and includes a new CloudFront images prefix in image.helpers to enable scaling for that domain. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
🚥 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. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
components/waves/drops/WaveDropAuthorPfp.tsx (1)
21-32: Consider extracting the mode type for DRY.The union type
"optimized" | "unoptimized" | "placeholder"is repeated three times. Extracting it would reduce repetition and make future changes easier.♻️ Suggested refactor
+type LoadMode = "optimized" | "unoptimized" | "placeholder"; + const WaveDropAuthorPfp: React.FC<WaveDropAuthorPfpProps> = ({ drop }) => { const compact = useCompactMode(); const resolvedPfp = drop.author.pfp ? resolveIpfsUrlSync(drop.author.pfp) : null; const [loadState, setLoadState] = useState<{ src: string | null; - mode: "optimized" | "unoptimized" | "placeholder"; + mode: LoadMode; }>({ src: null, mode: "optimized", }); - const loadMode: "optimized" | "unoptimized" | "placeholder" = + const loadMode: LoadMode = loadState.src === resolvedPfp ? loadState.mode : "optimized"; - const setLoadMode = (mode: "optimized" | "unoptimized" | "placeholder") => { + const setLoadMode = (mode: LoadMode) => { setLoadState({ src: resolvedPfp, mode }); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/waves/drops/WaveDropAuthorPfp.tsx` around lines 21 - 32, Extract the repeated union type into a single type alias (e.g., declare type LoadMode = "optimized" | "unoptimized" | "placeholder") and update the useState generic, the loadMode variable's type, and the setLoadMode parameter to use LoadMode instead of repeating the literal union; ensure loadState state shape remains { src: string | null; mode: LoadMode } and that functions/variables loadState, loadMode, and setLoadMode reference the new LoadMode alias.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@components/waves/drops/WaveDropAuthorPfp.tsx`:
- Around line 21-32: Extract the repeated union type into a single type alias
(e.g., declare type LoadMode = "optimized" | "unoptimized" | "placeholder") and
update the useState generic, the loadMode variable's type, and the setLoadMode
parameter to use LoadMode instead of repeating the literal union; ensure
loadState state shape remains { src: string | null; mode: LoadMode } and that
functions/variables loadState, loadMode, and setLoadMode reference the new
LoadMode alias.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
components/waves/drops/WaveDropAuthorPfp.tsxhelpers/image.helpers.ts
|
There was a problem hiding this comment.
🧹 Nitpick comments (1)
components/waves/drops/WaveDropAuthorPfp.tsx (1)
57-66: Make unoptimized fallback use the original URL, not the scaled URL.Right now both modes still request
getScaledImageUri(...). If the scaled path itself is bad/unavailable, the unoptimized retry cannot recover. Consider switchingsrctoresolvedPfpin unoptimized mode.♻️ Proposed refactor
+ const optimizedPfp = + resolvedPfp ? getScaledImageUri(resolvedPfp, ImageScale.W_AUTO_H_50) : null; + const imageSrc = + loadMode === "optimized" ? optimizedPfp : resolvedPfp; + const avatarContent = resolvedPfp === null || loadMode === "placeholder" ? ( <div className="tw-h-full tw-w-full tw-rounded-lg tw-bg-iron-900 tw-ring-1 tw-ring-inset tw-ring-white/10" /> ) : ( <Image - key={`${resolvedPfp}-${loadMode}`} - src={getScaledImageUri(resolvedPfp, ImageScale.W_AUTO_H_50)} + key={`${imageSrc}-${loadMode}`} + src={imageSrc} alt={ authorHandle ? `${authorHandle}'s profile picture` : "Profile picture" }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/waves/drops/WaveDropAuthorPfp.tsx` around lines 57 - 66, The Image currently always uses getScaledImageUri(resolvedPfp, ImageScale.W_AUTO_H_50) so when the scaled URL fails the unoptimized retry also requests the same bad URL; update the src prop in WaveDropAuthorPfp (the Image element that references getScaledImageUri, resolvedPfp and loadMode) to use the original resolvedPfp when loadMode === "unoptimized" (i.e., choose getScaledImageUri(...) for optimized mode and resolvedPfp for unoptimized mode) while keeping the unoptimized prop and onError handler unchanged so the fallback truly retries the original image URL.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@components/waves/drops/WaveDropAuthorPfp.tsx`:
- Around line 57-66: The Image currently always uses
getScaledImageUri(resolvedPfp, ImageScale.W_AUTO_H_50) so when the scaled URL
fails the unoptimized retry also requests the same bad URL; update the src prop
in WaveDropAuthorPfp (the Image element that references getScaledImageUri,
resolvedPfp and loadMode) to use the original resolvedPfp when loadMode ===
"unoptimized" (i.e., choose getScaledImageUri(...) for optimized mode and
resolvedPfp for unoptimized mode) while keeping the unoptimized prop and onError
handler unchanged so the fallback truly retries the original image URL.
prxt6529
approved these changes
Mar 3, 2026
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
Bug Fixes
New Features