Avatar loading & retrying

frontend/src/components/Avatar.tsx

@@ -0,0 +1,49 @@
+import { useMemo, useState } from "react";
+
+const defaultClasses = ["w-16", "h-16", "object-cover"];
+export const Avatar = ({
+  id,
+  size,
+  className,
+}: {
+  id: string;
+  size: number;
+  className?: string;
+}) => {
+  const classes = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          (className
+            ? defaultClasses.concat(className.split(" "))
+            : defaultClasses
+          ).concat([`w-${size}`, `h-${size}`])
+        )
+      ).join(" "),
+    [className, size]
+  );
+
+  const [showBroken, setShowBroken] = useState(false);
+
+  const handleError = () => {
+    setShowBroken(true);
+    setTimeout(
+      () => setShowBroken(false),
+      Math.floor(Math.random() * (1000 - 250 + 1)) + 250 // Random time between 250 and 1500 ms
+    );
+  };
+
+  if (showBroken) {
+    return <div className={`${classes} animate-pulse bg-slate-300`} />;
+  }
+
+  return (
+    <img
+      src={`https://api.dicebear.com/9.x/bottts-neutral/svg?seed=${id.replace("!", "")}`}
+      //   src="https://meshinfo.cvme.sh/broken.png"
+      onError={handleError}
+      alt="Avatar"
+      className={classes}
+    />
+  );
+};

frontend/src/pages/Neighbors.tsx

@@ -1,6 +1,7 @@
 import { formatDuration, formatISO, intervalToDuration } from "date-fns";
 import { useMemo } from "react";
 
+import { Avatar } from "../components/Avatar";
 import { HeardBy } from "../components/HeardBy";
 import { useGetNodesQuery } from "../slices/apiSlice";
 import { convertNodeIdFromIntToHex } from "../utils/convertNodeId";
@@ -76,11 +77,7 @@ export const Neighbors = () => {
                   valign="middle"
                 >
                   <a href={`node_${sanitizedId}.html`}>
-                    <img
-                      src={`https://api.dicebear.com/9.x/bottts-neutral/svg?seed=${sanitizedId}`}
-                      alt="Avatar"
-                      className="w-16 h-16 mb-1 object-cover"
-                    />
+                    <Avatar id={sanitizedId} size={16} className="mb-1" />
                   </a>
                 </td>
                 <td

frontend/src/pages/Node.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { Link, useParams } from "react-router-dom";
 
+import { Avatar } from "../components/Avatar";
 import { HardwareImg } from "../components/HardwareImg";
 import { useGetConfigQuery, useGetNodesQuery } from "../slices/apiSlice";
 import {
@@ -29,11 +30,7 @@ export const Node = () => {
 
       <div className="mb-4 flex flex-row">
         <div className="mr-2">
-          <img
-            src={`https://api.dicebear.com/9.x/bottts-neutral/svg?seed=${id}`}
-            alt={node.shortname}
-            className="w-16 h-16 mb-1 object-cover"
-          />
+          <Avatar id={node.id} size={16} />
         </div>
         <div>
           <h1 className="mb-2 text-xl">{`${node.shortname} - ${node.longname}`}</h1>

frontend/src/pages/Nodes.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 
+import { Avatar } from "../components/Avatar";
 import { DateToSince } from "../components/DateSince";
 import { HardwareImg } from "../components/HardwareImg";
 import { HeardBy } from "../components/HeardBy";
@@ -138,7 +139,7 @@ export const Nodes = () => {
             </th>
           </tr>
           <tr>
-            <th className="w-8 min-w-8 max-w-8 h-8 min-h-8 max-h-8 border border-gray-500 bg-gray-400"></th>
+            <th className="w-8 min-w-8 max-w-8 h-8 min-h-8 max-h-8 border border-gray-500 bg-gray-400" />
             <th className="border border-gray-500 bg-gray-400">Hex</th>
             <th className="border border-gray-500 bg-gray-400">
               <button type="button" onClick={() => clickSort("shortname")}>
@@ -151,7 +152,7 @@ export const Nodes = () => {
               </button>
             </th>
             <th className="hidden sm:table-cell border border-gray-500 bg-gray-400" />
-            <th className="border border-gray-500 bg-gray-400"></th>
+            <th className="border border-gray-500 bg-gray-400" />
             <th className="hidden xl:table-cell border border-gray-500 bg-gray-400">
               <button type="button" onClick={() => clickSort("altitude")}>
                 Altitude
@@ -216,11 +217,7 @@ export const Nodes = () => {
                 align="center"
                 valign="middle"
               >
-                <img
-                  src={`https://api.dicebear.com/9.x/bottts-neutral/svg?seed=$${id}`}
-                  alt="Avatar"
-                  className="w-8 h-8 object-cover"
-                />
+                <Avatar id={id} size={8} className="mb-1" />
               </td>
               <td className="p-1 border border-gray-400">
                 {id ? (