memoize proxyimg

packages/app/src/Components/ProxyImg.tsx

@@ -1,6 +1,7 @@
-import { forwardRef, HTMLProps, ReactNode, useEffect, useState } from "react";
+import { forwardRef, HTMLProps, memo, ReactNode, useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
+import Icon from "@/Components/Icons/Icon";
 import useImgProxy from "@/Hooks/useImgProxy";
 import { getUrlHostname } from "@/Utils";
 
@@ -12,7 +13,9 @@ type ProxyImgProps = HTMLProps<HTMLImageElement> & {
   missingImageElement?: ReactNode;
 };
 
-export const ProxyImg = forwardRef<HTMLImageElement, ProxyImgProps>(function ProxyImg(
+const defaultMissingImageElement = <Icon name="x" className="warning" />;
+
+const ProxyImgComponent = forwardRef<HTMLImageElement, ProxyImgProps>(function ProxyImg(
   { src, size, className, promptToLoadDirectly, missingImageElement, sha256, ...props }: ProxyImgProps,
   ref,
 ) {
@@ -60,14 +63,9 @@ export const ProxyImg = forwardRef<HTMLImageElement, ProxyImgProps>(function Pro
     }
   };
 
-  if (!imgSrc || loadFailed)
-    return (
-      missingImageElement ?? (
-        <div>
-          <FormattedMessage defaultMessage="Image not available" id="Y7FG5M" />
-        </div>
-      )
-    );
+  if (!imgSrc || loadFailed) {
+    return missingImageElement ?? defaultMissingImageElement;
+  }
 
   return (
     <img
@@ -81,3 +79,8 @@ export const ProxyImg = forwardRef<HTMLImageElement, ProxyImgProps>(function Pro
     />
   );
 });
+
+const ProxyImg = memo(ProxyImgComponent);
+ProxyImg.displayName = "ProxyImg";
+
+export { ProxyImg };

packages/app/src/Components/User/Avatar.tsx

@@ -4,7 +4,6 @@ import type { UserMetadata } from "@snort/system";
 import classNames from "classnames";
 import { ReactNode, useMemo } from "react";
 
-import Icon from "@/Components/Icons/Icon";
 import { ProxyImg } from "@/Components/ProxyImg";
 import { defaultAvatar, getDisplayName } from "@/Utils";
 
@@ -60,7 +59,6 @@ const Avatar = ({
         size={s}
         alt={getDisplayName(user, "")}
         promptToLoadDirectly={false}
-        missingImageElement={<Icon name="x" className="warning" />}
       />
       {icons && <div className="icons">{icons}</div>}
       {imageOverlay && <div className="overlay">{imageOverlay}</div>}

packages/app/src/lang.json

@@ -1033,9 +1033,6 @@
     "defaultMessage": "Redeem",
     "description": "Button: Redeem Cashu token"
   },
-  "Y7FG5M": {
-    "defaultMessage": "Image not available"
-  },
   "YDURw6": {
     "defaultMessage": "Service URL"
   },

packages/app/src/translations/en.json

@@ -340,7 +340,6 @@
   "Xnimz0": "Sending from <b>{wallet}</b>",
   "Xopqkl": "Your default zap amount is {number} sats, example values are calculated from this.",
   "XrSk2j": "Redeem",
-  "Y7FG5M": "Image not available",
   "YDURw6": "Service URL",
   "YR2I9M": "No keys, no {app}, There is no way to reset it if you don't back up. It only takes a minute.",
   "YXA3AH": "Enable reactions",