Initial commit

src/components/ImageWithFallback/ImageWithFallback.module.css

@@ -0,0 +1,134 @@
+/* ImageWithFallback component styles */
+.loadingContainer {
+  background-color: #f8f9fa;
+  overflow: hidden;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loadingSpinner {
+  animation: spin 1s linear infinite;
+  color: #6c757d;
+}
+
+.loadingSpinner circle:first-child {
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+.loadingText {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #6c757d;
+  font-weight: 500;
+}
+
+.placeholderIcon {
+  color: #6c757d;
+  opacity: 0.7;
+}
+
+/* Spinner animation */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+/* Loading state transitions */
+.loadingState {
+  transition: opacity 0.3s ease-in-out;
+  background-color: #f8f9fa;
+  z-index: 2;
+}
+
+/* Error state */
+.errorState {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+/* Success state */
+.successState {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .loadingText {
+    font-size: 10px;
+  }
+
+  .placeholderIcon {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  /* .loadingContainer {
+    background-color: #343a40;
+  } */
+
+  .loadingText {
+    color: #adb5bd;
+  }
+
+  .placeholderIcon {
+    color: #adb5bd;
+  }
+}
+
+/* HTML: <div class="loader"></div> */
+.loader {
+  width: 30px;
+  aspect-ratio: 1;
+  display: grid;
+  border-radius: 50%;
+  background:
+    linear-gradient(0deg, rgb(0 0 0/50%) 30%, #0000 0 70%, rgb(0 0 0/100%) 0)
+      50%/8% 100%,
+    linear-gradient(90deg, rgb(0 0 0/25%) 30%, #0000 0 70%, rgb(0 0 0/75%) 0)
+      50%/100% 8%;
+  background-repeat: no-repeat;
+  animation: l23 1s infinite steps(12);
+}
+.loader::before,
+.loader::after {
+  content: "";
+  grid-area: 1/1;
+  border-radius: 50%;
+  background: inherit;
+  opacity: 0.915;
+  transform: rotate(30deg);
+}
+.loader::after {
+  opacity: 0.83;
+  transform: rotate(60deg);
+}
+@keyframes l23 {
+  100% {
+    transform: rotate(1turn);
+  }
+}

src/components/ImageWithFallback/ImageWithFallback.tsx

@@ -0,0 +1,157 @@
+import { Image, ImageProps, Skeleton } from "antd";
+import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
+import styles from "./ImageWithFallback.module.css";
+
+interface ImageWithFallbackProps extends ImageProps {
+  fallbackSrc: string;
+  borderRadius?: number | string;
+  priority?: boolean;
+  lazy?: boolean;
+  placeholder?: "blur" | "empty";
+  blurDataURL?: string;
+  width?: number | string;
+  height?: number | string;
+  loadingContainerStyle?: CSSProperties;
+}
+
+const ImageWithFallback = ({
+  fallbackSrc,
+  src,
+  borderRadius,
+  style,
+  alt,
+  priority = false,
+  lazy = true,
+  width,
+  height,
+  loadingContainerStyle,
+  ...rest
+}: ImageWithFallbackProps) => {
+  const [imgSrc, setImgSrc] = useState(src || fallbackSrc);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isInView, setIsInView] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const imageRef = useRef<HTMLDivElement>(null);
+
+  // Intersection Observer for lazy loading
+  useEffect(() => {
+    if (lazy && !priority) {
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setIsInView(true);
+            observer.disconnect();
+          }
+        },
+        {
+          rootMargin: "50px", // Start loading 50px before the image comes into view
+          threshold: 0.1,
+        }
+      );
+
+      if (imageRef.current) {
+        observer.observe(imageRef.current);
+      }
+
+      return () => observer.disconnect();
+    } else {
+      setIsInView(true);
+    }
+  }, [lazy, priority]);
+
+  const handleError = useCallback(() => {
+    setImgSrc(fallbackSrc);
+    setHasError(true);
+    setIsLoading(false);
+  }, [fallbackSrc]);
+
+  const handleLoad = useCallback(() => {
+    setIsLoading(false);
+    setHasError(false);
+  }, []);
+
+  // Combine custom style with borderRadius if provided
+  const combinedStyle = {
+    ...style,
+    ...(borderRadius && { borderRadius }),
+  };
+
+  // Don't render the image until it's in view (for lazy loading)
+  if (lazy && !priority && !isInView) {
+    return (
+      <div
+        ref={imageRef}
+        className={styles.loadingContainer}
+        style={{
+          ...combinedStyle,
+          height,
+          width: width || 90,
+        }}
+      >
+        <Skeleton.Image
+          active
+          style={{
+            border: "none",
+            height,
+            width: width || 90,
+            ...loadingContainerStyle,
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div ref={imageRef} style={{ position: "relative", height }}>
+      {isLoading && !hasError && (
+        <div
+          className={`${styles.loadingContainer} ${styles.loadingState}`}
+          style={{
+            zIndex: 1,
+            borderRadius: borderRadius || "8px",
+            height,
+            width: width || 90,
+            textAlign: "center",
+            ...loadingContainerStyle,
+          }}
+        >
+          <Skeleton.Image
+            active
+            style={{
+              height,
+              width: width || 90,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              ...loadingContainerStyle,
+            }}
+          />
+        </div>
+      )}
+
+      <Image
+        src={imgSrc}
+        onError={handleError}
+        onLoad={handleLoad}
+        style={{
+          opacity: isLoading ? 0 : 1,
+          transition: "opacity 0.3s ease-in-out",
+          objectFit: "cover",
+          ...combinedStyle,
+
+        }}
+        alt={alt || ""}
+        width={width}
+        height={height}
+        preview={false}
+        {...rest}
+      />
+    </div>
+  );
+};
+
+export default ImageWithFallback;

src/components/ImageWithFallback/index.ts

@@ -0,0 +1 @@
+export { default } from "./ImageWithFallback";