Lazy load song art and add loading image

2022-10-19 18:59:35 +01:00 · 2022-10-19 18:59:35 +01:00 · 0be1b20a6e
commit 0be1b20a6e
parent d0c10257b9
1 changed files with 8 additions and 1 deletions
--- a/src/components/SongInfo.js
+++ b/src/components/SongInfo.js
@ -65,7 +65,14 @@ export default class SongInfo extends Component {

 		return (
 			<div className={styles.songInfoContainer}>
-				<Image alt="Song art-work" src={songArt} />
+				<Image
+					alt="Song art-work"
+					src={songArt}
+					loading="lazy"
+					placeholder="blur"
+					blurDataURL="https://cdn.fascinated.cc/IkQFyodbZv.jpg?raw=true"
+					unoptimized={true}
+				/>
 				<div className={styles.songInfo}>
 					<p className={styles.songInfoSongName}>
 						{songName.length > 35