@local-civics/mgmt-ui 0.1.218 → 0.1.220

package/dist/index.js

@@ -5,6 +5,7 @@ var icons = require('@tabler/icons');
 var core = require('@mantine/core');
 var reactRouterDom = require('react-router-dom');
 var notifications = require('@mantine/notifications');
+require('external-svg-loader');
 var dropzone = require('@mantine/dropzone');
 var form = require('@mantine/form');
 var papa = require('papaparse');
@@ -344,12 +345,45 @@ 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__namespace.createElement("img", { src: props.imageURL, alt: props.alt || "", className: `${s.box} shrink-0 ${s.rounded} object-cover` });
+  const [failed, setFailed] = React__namespace.useState(false);
+  const ref = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    setFailed(false);
+    if (!props.imageURL) {
+      return;
+    }
+    const el = ref.current;
+    const timer = setTimeout(() => setFailed(true), LOAD_TIMEOUT_MS);
+    const onLoad = () => {
+      setFailed(false);
+      clearTimeout(timer);
+    };
+    el == null ? void 0 : el.addEventListener("iconload", onLoad);
+    return () => {
+      el == null ? void 0 : el.removeEventListener("iconload", onLoad);
+      clearTimeout(timer);
+    };
+  }, [props.imageURL]);
+  if (props.imageURL && !failed) {
+    return /* @__PURE__ */ React__namespace.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__namespace.createElement("div", { className: `flex ${s.box} shrink-0 items-center justify-center ${s.rounded} ${a.bg}` }, /* @__PURE__ */ React__namespace.createElement(Icon, { size: s.icon, stroke: 1.75, className: a.text }));
 }