More docs and bump to 0.0.7

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "docusaurus-plugin-native-ideal-image",
-	"version": "0.0.6",
+	"version": "0.0.7",
 	"description": "Pre-process images to multiple formats and low quality image placeholders",
 	"keywords": ["docusaurus"],
 	"author": "Tony",

src/theme/NativeIdealImage.tsx

@@ -9,8 +9,12 @@ export type NativeIdealImageProps = Omit<ComponentProps<'img'>, 'ref'> & {
 	/** The output of `import('ideal-img!./some-image.jpeg')` */
 	readonly img: { default: string | NativeIdealImageData } | string | NativeIdealImageData
 	/**
-	 * Swap (fade in) the actual image after it's fully loaded,
-	 * requires JavaScript to work, so this might cause the image to load a bit slower
+	 * Swap (fade in) the actual image after it's fully loaded
+	 *
+	 * Note: this requires JavaScript to work,
+	 * so will not work if the script is loaded after the image,
+	 * and also if the image is half loaded when the script kicks in,
+	 * the partially loaded image will get covered by the low quality placeholder
 	 * */
 	swapOnLoad?: boolean
 }
@@ -51,15 +55,16 @@ export default function NativeIdealImage(props: NativeIdealImageProps): JSX.Elem
 	const imageEl = useRef<HTMLImageElement>(null)
 
 	useEffect(() => {
+		if (loaded) {
+			return
+		}
 		if (imageEl.current?.complete) {
 			setLoaded(true)
 			return
 		}
-		if (!loaded) {
-			// Prevent fade in if we have the image cache available (likely being a back/forward navigation)
-			const id = setTimeout(() => setPlaceHolderOnTop(true), 50)
-			return () => clearTimeout(id)
-		}
+		// Prevent fade in if we have the image cache available (likely being a back/forward navigation)
+		const id = setTimeout(() => setPlaceHolderOnTop(true), 50)
+		return () => clearTimeout(id)
 	}, [loaded])
 
 	return (