Demo update

README.md

@@ -483,6 +483,7 @@ yarn build:debug  # Debug build for development
 2. **Make your changes** with appropriate tests
 3. **Update documentation** if needed
 4. **Run the full test suite**
+3. **Add changeset**. Run `yarn changeset` and update the appropriate packages with proper changelog
 5. **Submit a pull request** with a clear description
 
 

examples/vite-react-ts/src/App.css

@@ -29,14 +29,39 @@ body {
   position: relative;
   width: 100%;
   height: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.preview-image-container .image-container {
+  display: inline-block;
+  font-size: 0;
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 .preview-image-container img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
-  border-radius: 10px;
+}
+
+.preview-image-container .placeholder-image {
+  width: 100%;
+}
+
+.preview-image-container .main-image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  transition: opacity 0.25s ease-in-out;
+}
+
+.preview-image-container .image-container:hover .main-image {
+  opacity: 1;
 }
 
 .loader-container {
@@ -90,7 +115,6 @@ body {
   color: #000;
 }
 
-
 .preview-image-container:hover .image-source {
   display: block;
 }
@@ -106,4 +130,3 @@ body {
   width: 100%;
   min-width: 300px;
 }
-

examples/vite-react-ts/src/components/image.tsx

@@ -1,44 +1,30 @@
-import { useEffect, useState, type ImgHTMLAttributes } from "react";
+import { type ImgHTMLAttributes } from "react";
 
 export const PreviewImage = ({
-  actualSrc,
+  src,
   placeholder,
   imageSource,
   ...props
 }: ImgHTMLAttributes<HTMLImageElement> & {
   placeholder: string;
-  actualSrc: string;
   imageSource?: string;
 }) => {
-  const [loaded, setLoaded] = useState(false);
-  const [hovered, setHovered] = useState(false);
-
-  useEffect(() => {
-    const image = new Image();
-    image.src = actualSrc;
-    image.onload = () => setLoaded(true);
-  }, []);
-
   return (
     <div className="preview-image-container">
-      <img
-        {...props}
-        src={hovered && loaded ? actualSrc : placeholder}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-      />
-      {hovered && !loaded && (
-        <div className="loader-container">
-          <div className="loader"></div>
-        </div>
-      )}
-      {imageSource && (
-        <div className="image-source">
-          <a href={imageSource} target="_blank" rel="noopener noreferrer">
-            Image Source
-          </a>
-        </div>
-      )}
+      <div className="image-container">
+        <img src={placeholder} className="placeholder-image" />
+        <img
+          src={src}
+          {...props}
+          className={["main-image", props.className].join(" ")}
+          loading="lazy"
+        />
+      </div>
+      <div className="image-source">
+        <a href={imageSource} target="_blank" rel="noopener noreferrer">
+          Image Source
+        </a>
+      </div>
     </div>
   );
 };

examples/vite-react-ts/src/components/placeholder-average-color.tsx

@@ -48,7 +48,7 @@ export const PlaceholderAverageColorType = () => {
           <div className="item" key={image.src}>
             <PreviewImage
               placeholder={image.preview}
-              actualSrc={image.src}
+              src={image.src}
               imageSource={image.source}
             />
           </div>

examples/vite-react-ts/src/components/placeholder-blurred.tsx

@@ -48,7 +48,7 @@ export const PlaceholderBlurredType = () => {
           <div className="item" key={image.src}>
             <PreviewImage
               placeholder={image.preview}
-              actualSrc={image.src}
+              src={image.src}
               imageSource={image.source}
             />
           </div>

examples/vite-react-ts/src/components/placeholder-dominant-color.tsx

@@ -48,7 +48,7 @@ export const PlaceholderDominantColorType = () => {
           <div className="item" key={image.src}>
             <PreviewImage
               placeholder={image.preview}
-              actualSrc={image.src}
+              src={image.src}
               imageSource={image.source}
             />
           </div>

examples/vite-react-ts/src/components/placeholder-grayscale.tsx

@@ -47,7 +47,7 @@ export const PlaceholderGrayscaleType = () => {
           <div className="item" key={image.src}>
             <PreviewImage
               placeholder={image.preview}
-              actualSrc={image.src}
+              src={image.src}
               imageSource={image.source}
             />
           </div>

examples/vite-react-ts/src/components/placeholder-no-svg-wrap.tsx

@@ -51,7 +51,7 @@ export const PlaceholderNoSvgWrap = () => {
           <div className="item" key={image.src}>
             <PreviewImage
               placeholder={image.preview}
-              actualSrc={image.src}
+              src={image.src}
               imageSource={image.source}
             />
           </div>

examples/vite-react-ts/src/components/placeholder-normal.tsx

@@ -34,7 +34,7 @@ export const PlaceholderNormalType = () => {
           <div className="item" key={image.src}>
             <PreviewImage
               placeholder={image.preview}
-              actualSrc={image.src}
+              src={image.src}
               imageSource={image.source}
             />
           </div>