From 6324282b480f358a3d5936ab6d08ab239d640997 Mon Sep 17 00:00:00 2001
From: AAGaming <aa@bigdumb.gq>
Date: Wed, 8 Jun 2022 21:59:12 -0400
Subject: [PATCH] feat(custom-components): add SuspensefulImage

---
 src/custom-components/SuspensefulImage.tsx | 43 ++++++++++++++++++++++
 src/custom-components/index.ts             |  1 +
 src/index.ts                               |  1 +
 3 files changed, 45 insertions(+)
 create mode 100644 src/custom-components/SuspensefulImage.tsx
 create mode 100644 src/custom-components/index.ts

diff --git a/src/custom-components/SuspensefulImage.tsx b/src/custom-components/SuspensefulImage.tsx
new file mode 100644
index 0000000..7ff5d59
--- /dev/null
+++ b/src/custom-components/SuspensefulImage.tsx
@@ -0,0 +1,43 @@
+import { Spinner } from '../deck-components';
+import { useEffect } from 'react';
+import { FC, ImgHTMLAttributes, useState } from 'react';
+
+interface SuspensefulImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  suspenseWidth?: string | number;
+  suspenseHeight?: string | number;
+}
+
+const SuspensefulImage: FC<SuspensefulImageProps> = (props) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = props.src || '';
+    img.addEventListener('load', () => {
+      setLoading(false);
+    });
+    img.addEventListener('error', () => {
+      setError(true);
+    });
+  }, []);
+
+  return loading ? (
+    <div
+      style={{
+        width: props.suspenseWidth || props.style?.width,
+        height: props.suspenseHeight || props.style?.height,
+        background: 'rgba(255, 255, 255, 0.2)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {error ? 'Missing image' : <Spinner style={{ height: '48px' }} />}
+    </div>
+  ) : (
+    <img {...props} />
+  );
+};
+
+export default SuspensefulImage;
\ No newline at end of file
diff --git a/src/custom-components/index.ts b/src/custom-components/index.ts
new file mode 100644
index 0000000..ab8b078
--- /dev/null
+++ b/src/custom-components/index.ts
@@ -0,0 +1 @@
+export * from './SuspensefulImage';
diff --git a/src/index.ts b/src/index.ts
index 10d707b..ad884b4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 // export * from './deck-libs';
+export * from './custom-components';
 export * from './deck-components';
 export * from './plugin';
 export * from './webpack';