@colisweb/rescript-toolkit 5.29.6 → 5.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "5.29.6",
+  "version": "5.30.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/src/ui/SuspenseImage.jsx

@@ -0,0 +1,52 @@
+const cache = new Map();
+
+function createResource(asyncFn) {
+  let status = "pending";
+  let result;
+  const promise = asyncFn().then(
+    (r) => {
+      status = "success";
+      result = r;
+    },
+    (e) => {
+      status = "error";
+      result = e;
+    },
+  );
+  return {
+    read() {
+      switch (status) {
+        case "pending":
+          throw promise;
+        case "error":
+          throw result;
+        case "success":
+          return result;
+      }
+    },
+  };
+}
+function loadImage(source) {
+  let resource = cache.get(source);
+  if (resource) return resource;
+
+  resource = createResource(
+    () =>
+      new Promise((resolve, reject) => {
+        const img = new window.Image();
+        img.src = source;
+
+        img.addEventListener("load", () => resolve(source));
+        img.addEventListener("error", () =>
+          reject(new Error(`Failed to load image ${source}`)),
+        );
+      }),
+  );
+
+  cache.set(source, resource);
+  return resource;
+}
+export default function SuspenseImage(props) {
+  loadImage(props.src).read();
+  return <img {...props} />;
+}

package/src/ui/Toolkit__Ui.res

@@ -45,3 +45,4 @@ module DropdownMenu = Toolkit__Ui_DropdownMenu
 module ScrollArea = Toolkit__Ui_ScrollArea
 module PasswordRulesNotice = Toolkit__Ui_PasswordRulesNotice
 module SectionCard = Toolkit__Ui_SectionCard
+module SuspenseImage = Toolkit__Ui_SuspenseImage

package/src/ui/Toolkit__Ui_SuspenseImage.res

@@ -0,0 +1,2 @@
+@module("@root/src/ui/SuspenseImage.jsx") @react.component
+external make: (~src: string, ~className: string=?) => React.element = "default"