Pfp loading fix

components/waves/drops/WaveDropAuthorPfp.tsx

@@ -1,22 +1,39 @@
 "use client";
 
-import React from "react";
-import Image from "next/image";
-import Link from "next/link";
-import type { ApiDrop } from "@/generated/models/ApiDrop";
 import { resolveIpfsUrlSync } from "@/components/ipfs/IPFSContext";
 import UserProfileTooltipWrapper from "@/components/utils/tooltip/UserProfileTooltipWrapper";
 import { useCompactMode } from "@/contexts/CompactModeContext";
+import type { ApiDrop } from "@/generated/models/ApiDrop";
+import { getScaledImageUri, ImageScale } from "@/helpers/image.helpers";
+import Image from "next/image";
+import Link from "next/link";
+import React, { useState } from "react";
 
 interface WaveDropAuthorPfpProps {
   readonly drop: ApiDrop;
 }
 
+type PfpLoadMode = "optimized" | "unoptimized" | "placeholder";
+
+type PfpLoadState = {
+  src: string | null;
+  mode: PfpLoadMode;
+};
+
 const WaveDropAuthorPfp: React.FC<WaveDropAuthorPfpProps> = ({ drop }) => {
   const compact = useCompactMode();
   const resolvedPfp = drop.author.pfp
     ? resolveIpfsUrlSync(drop.author.pfp)
     : null;
+  const [loadState, setLoadState] = useState<PfpLoadState>({
+    src: null,
+    mode: "optimized",
+  });
+  const loadMode: PfpLoadMode =
+    loadState.src === resolvedPfp ? loadState.mode : "optimized";
+  const setLoadMode = (mode: PfpLoadMode) => {
+    setLoadState({ src: resolvedPfp, mode });
+  };
 
   const authorHandle = drop.author.handle;
   const profileHref = authorHandle ? `/${authorHandle}` : null;
@@ -25,17 +42,31 @@ const WaveDropAuthorPfp: React.FC<WaveDropAuthorPfpProps> = ({ drop }) => {
   const sizeClasses = compact ? "tw-h-8 tw-w-8" : "tw-h-10 tw-w-10";
   const containerClasses = `tw-relative tw-flex-shrink-0 ${sizeClasses} tw-rounded-lg tw-bg-iron-900 tw-overflow-hidden`;
 
-  const avatarContent = resolvedPfp ? (
-    <Image
-      src={resolvedPfp}
-      alt={authorHandle ? `${authorHandle}'s profile picture` : "Profile picture"}
-      fill
-      sizes={compact ? "32px" : "40px"}
-      className="tw-object-contain tw-rounded-lg tw-bg-transparent"
-    />
-  ) : (
-    <div className="tw-h-full tw-w-full tw-bg-iron-900 tw-ring-1 tw-ring-inset tw-ring-white/10 tw-rounded-lg" />
-  );
+  const handleImageError = () => {
+    if (loadMode === "optimized") {
+      setLoadMode("unoptimized");
+      return;
+    }
+    setLoadMode("placeholder");
+  };
+
+  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)}
+        alt={
+          authorHandle ? `${authorHandle}'s profile picture` : "Profile picture"
+        }
+        fill
+        sizes={compact ? "32px" : "40px"}
+        unoptimized={loadMode === "unoptimized"}
+        onError={handleImageError}
+        className="tw-rounded-lg tw-bg-transparent tw-object-contain"
+      />
+    );
 
   const handleClick = (event: React.MouseEvent) => {
     event.stopPropagation();

helpers/image.helpers.ts

@@ -14,6 +14,7 @@ const SCALABLE_PREFIXES = [
   "https://d3lqz0a4bldqgf.cloudfront.net/rememes/",
   "https://d3lqz0a4bldqgf.cloudfront.net/drops/",
   "https://d3lqz0a4bldqgf.cloudfront.net/waves/",
+  "https://d3lqz0a4bldqgf.cloudfront.net/images/",
 ];
 
 export function getScaledImageUri(url: string, scale: ImageScale): string {