@local-civics/mgmt-ui 0.1.217 → 0.1.219

package/dist/index.mjs

@@ -5,6 +5,7 @@ import { Avatar, createStyles, Modal, Center, Loader, Container, Group, Button,
 import { Link } from 'react-router-dom';
 import { showNotification, NotificationsProvider } from '@mantine/notifications';
 export { showNotification, updateNotification } from '@mantine/notifications';
+import 'external-svg-loader';
 import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
 import { useForm } from '@mantine/form';
 import * as papa from 'papaparse';
@@ -324,12 +325,42 @@ const ACCENT = {
   mint: { bg: "bg-mint-400/15", text: "text-mint-400" },
   gold: { bg: "bg-gold-400/15", text: "text-gold-400" }
 };
+const LOAD_TIMEOUT_MS = 3e3;
 function Emblem(props) {
   const s = SIZE[props.size || "sm"];
   const a = ACCENT[props.accent];
   const Icon = props.icon;
-  if (props.imageURL) {
-    return /* @__PURE__ */ React.createElement("img", { src: props.imageURL, alt: props.alt || "", className: `${s.box} shrink-0 ${s.rounded} object-cover` });
+  const [failed, setFailed] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    setFailed(false);
+    if (!props.imageURL) {
+      return;
+    }
+    const el = ref.current;
+    const onLoad = () => setFailed(false);
+    el == null ? void 0 : el.addEventListener("iconload", onLoad);
+    const timer = setTimeout(() => setFailed(true), LOAD_TIMEOUT_MS);
+    return () => {
+      el == null ? void 0 : el.removeEventListener("iconload", onLoad);
+      clearTimeout(timer);
+    };
+  }, [props.imageURL]);
+  if (props.imageURL && !failed) {
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        ref,
+        "data-cache": "disabled",
+        "data-src": props.imageURL,
+        className: `${s.box} shrink-0 ${s.rounded} object-cover`,
+        viewBox: "0 0 32 32",
+        width: "32",
+        height: "32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }
+    );
   }
   return /* @__PURE__ */ React.createElement("div", { className: `flex ${s.box} shrink-0 items-center justify-center ${s.rounded} ${a.bg}` }, /* @__PURE__ */ React.createElement(Icon, { size: s.icon, stroke: 1.75, className: a.text }));
 }